皇冠云

您现在的位置是:首页 > 云服务器 > 正文

云服务器

vue项目部署到nginx服务器

来源于网络2020-10-28云服务器25
相信很多刚学习vue的朋友都可以进行到将vue项目进行npmrunbuild这部,对于将build后的结果部署到nginx服务器上却一知半解,作者刚开始的时候也是很迷惑
美国200G高防现已上架 性价比之王中王 大宽带 CN2直连 高性能 感受不一般全美到大陆最快线路 誉为【站群王】赠天机盾防CC 限时限购低至5折!立即抢购!

相信很多刚学习vue的朋友都可以进行到将vue项目进行npm run build这部,对于将build后的结果部署到nginx服务器上却一知半解,作者刚开始的时候也是很迷惑,看到网上很多朋友在问,今天作者就将自己的部署过程记录下来,供大家参考。

首先将开发完成的vue项目打包

//  在终端中cd到项目目录下
cd  /usr/local/project
//  进行项目构建(可在本地构建)
npm run build
// build后会在目录下多了一个dist文件夹
dist中包含: index.html  和 static文件夹
// vue部分准备工作完成

服务器安装nginx

// 作者是Ubuntu的服务器
sudo apt-get nginx
// 等待nginx安装完成

接下来首先将vue build后的dist下的两部分放到服务器上

cd /var/www/html

mkdir project

// 将dist下的两部分(index.html和static)放到project下

接下来进入到nginx配置了

// 找到nginx.conf文件
cd /etc/nginx
// 打开nginx.conf
vim nginx.conf

可以看到,作者在图中红色标出部分,提示大家nginx端口的真实配置其实在红色指出部分

// cd至 sites-enabled
cd sites-enabled
// 查看下面是否有default
vim default

可以看到,该处确实是nginx的真实配置

// 将下面的代码添加到上面所示的后面
location /project {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                alias  /var/www/html/project;
                index index.html index.htm;

                try_files $uri $uri/ =404;
        }
// 退出重启nginx
service nginx reload
// ps查看是否重启了nginx
ps -ef |grep nginx

接下来通过浏览器访问“http://xxx.xxx.xx.xxx(该处为你的服务器ip)/project”就可以看到你的vue项目啦,作者的项目已经部署成功啦,github上的项目地址是https://github.com/guodonglw/vue_admin,希望能够帮助到大家
注:如果是阿里云或其他机构的服务器,需先在安全组中配置80端口对外开放

【版权说明:本篇文章基于互联网CC-BY-NC-SA分享协议;如需转载时请注明出处及相应链接!】

美国200G高防现已上架 性价比之王中王 大宽带 CN2直连 高性能 感受不一般全美到大陆最快线路 誉为【站群王】赠天机盾防CC 限时限购低至5折!立即抢购!

发表评论

评论列表

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~