大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

nginx下如何部署vue项目

这篇文章给大家分享的是有关nginx下如何部署vue项目的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

汉南网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站设计等网站项目制作,到程序开发,运营维护。创新互联2013年至今到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。

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

下载地址:https://nginx.org/en/download.html

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项目
网页URL:http://dzwzjz.com/article/gcceci.html
在线咨询
服务热线
服务热线:028-86922220
TOP