vue项目部署到nginx服务器
2019-06-11 18:28
4603 查看
相信很多刚学习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端口对外开放
相关文章推荐
- vue项目部署在windows下的nginx服务器上
- 如何部署vue前端项目到服务器上(nginx处理跨域)
- Vue-router+webpack单页项目服务器部署(nginx)
- Vue项目服务器部署之子目录部署方法
- vue项目部署到apache服务器页面空白的问题
- 在nginx上部署vue项目(history模式);
- nginx部署vue项目
- Docker 通过Nginx镜像部署Vue项目
- Django项目部署:Nginx+uWSGI服务器
- Vue项目webpack打包部署到服务器的实例详解
- 在服务器上uwsgi+nginx部署Django项目
- 谈下vue+nodejs+nginx+mongodb的网站部署到服务器
- Vue项目与nginx部署跨域问题
- vue、react等单页面项目部署到服务器的方法及vue和react的区别
- vue项目部署到Apache服务器中遇到的问题解决
- Laravel项目部署到Nginx服务器除了/目录,全飘404
- Vue项目webpack打包部署到服务器
- nginx代理部署Vue与React项目
- nginx配置vue-router+webpack项目部署访问刷新出现404问题
- nginx服务器搭建及部署项目流程