快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

nginx下怎么部署vue项目

本篇内容主要讲解“nginx下怎么部署vue项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“nginx下怎么部署vue项目”吧!

10余年的麻城网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整麻城建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联从事“麻城网站设计”,“麻城网站推广”以来,每个客户项目都认真落实执行。

首先要去nginx官网下下载nginx:

下载地址:

nginx下怎么部署vue项目

下载下来会是一个解压包,解压到你想放的文件夹下

nginx下怎么部署vue项目

运行nginx.exe,然后打开浏览器输入localhost出来如下图片所示就说明成功了:

nginx下怎么部署vue项目

然后如果没有成功出来的话也不要慌不要怕,可能是你的端口被别的内容所占了这时你就打开你的nginx的目录下找到conf

nginx下怎么部署vue项目

点击进去然后找到一个nginx.conf的文件

nginx下怎么部署vue项目

然后把它用编辑器的方式打开,打开之后找到这里的sever的listen就是你的端口号,默认的是80端口,你可以根据自己没有被占用的端口进行改写,改写完成之后保存然后打开你的localhost:你改写的端口号就ok了

 server {
      listen    8088;
      server_name localhost;

      #charset koi8-r;

      #access_log logs/host.access.log main;

      location / {
        root  html;
        index index.html index.htm;
    }

nginx下怎么部署vue项目

上面是安装配置nginx服务器的方法,下面就是如何把自己的vue项目部署到你所安装配置的nginx服务器上的步骤了:

首先找到自己的vue的项目然后输入命令 npm run build 他会在你的vue目录下生成一个dist文件夹里面就是你的vue的项目

nginx下怎么部署vue项目

然后打开这个dist文件夹把里面的内容复制下来里面会有两个文件一个是index.html是主目录还有一个是static文件夹

nginx下怎么部署vue项目

把他们复制下来然后打开你的nginx的目录下的html文件里面会有两个默认文件直接删掉不要留,然后把你刚刚复制的文件粘贴进去

nginx下怎么部署vue项目

然后打开浏览器输入最开始改的端口号localhost:你所改的端口号回车;你就会看到自己的vue的项目跑起来了我的打开就是这样的咯:

nginx下怎么部署vue项目

到此,相信大家对“nginx下怎么部署vue项目”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前名称:nginx下怎么部署vue项目
文章地址:http://6mz.cn/article/ppcgie.html

其他资讯