多个Vue项目部署到服务器的步骤记录


Posted in Javascript onOctober 22, 2020

一、业务描述:

最近在做一个电商的项目,里面有平台端和商家端以及用户端,那么这么多Vue项目如何部署到服务器呢?

二、部署

(1)首先在本地测试项目可以启动并且能正常运行。

(2)在项目中输入npm run build

多个Vue项目部署到服务器的步骤记录

此时会生成一个文件

多个Vue项目部署到服务器的步骤记录

(3)在服务器上安装Nginx,并将admin-web上传到服务器。

我上传的位置:

多个Vue项目部署到服务器的步骤记录

 (4)修改Nginx文件,找到nginx.conf

多个Vue项目部署到服务器的步骤记录

 三、如果此时有多个vue项目呢?

多加几个location即可

多个Vue项目部署到服务器的步骤记录

四、最后记得保存

:wq

五、重新启动Nginx

systemctl restart nginx

六:Nginx.conf的内容

server {
  listen  80;
  server_name localhost;
 
  #charset koi8-r;
 
  #access_log logs/host.access.log main;
 
  location / {
   root html/dist/;
   index index.html index.htm;
   try_files $uri $uri/ @router;
   index index.html;
  }
  #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
  location @router {
  #   #因此需要rewrite到index.html中,然后交给路由再处理请求资源
     rewrite ^.*$ /index.html last;
  }
 
  location /admin {
   alias /usr/local/nginx/admin/dist;
   index index.html index.htm;
   try_files $uri $uri/ @router;
   index index.html;
  }
 
    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的
  location @router {
  #   #因此需要rewrite到index.html中,然后交给路由再处理请求资源
   try_files $uri $uri/ @router;
   index index.html;
  }
 
    #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体>的文件
  location @router {
  #   #因此需要rewrite到index.html中,然后交给路由再处理请求资源
    rewrite ^.*$ /index.html last;
  }

总结

到此这篇关于多个Vue项目部署到服务器的文章就介绍到这了,更多相关多个Vue项目部署到服务器内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
js 幻灯片的实现
Dec 06 Javascript
script标签属性type与language使用选择
Dec 02 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JavaScript判断一个字符串是否包含指定子字符串的方法
Mar 18 Javascript
完美解决js传递参数中加号和&号自动改变的方法
Oct 11 Javascript
简单理解vue中Props属性
Oct 27 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
深入理解vue.js中$watch的oldvalue与newValue
Aug 07 Javascript
webpack4.x打包过程详解
Jul 18 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
针对Vue路由history模式下Nginx后台配置操作
Oct 22 #Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 #Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 #Javascript
记一次vue跨域的解决
Oct 21 #Javascript
解决Vue项目中tff报错的问题
Oct 21 #Javascript
vue-cli3自动消除console.log()的调试信息方式
Oct 21 #Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 #Javascript
You might like
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
ThinkPHP模版中导入CSS和JS文件的方法
2014/11/29 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
php中array_slice和array_splice函数解析
2016/10/18 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
js+cookies实现悬浮购物车的方法
2015/05/25 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
全面解析vue中的数据双向绑定
2017/05/10 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
JS轮播图的实现方法2
2020/08/25 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python抓取搜狗微信公众号文章
2019/04/01 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
python:按行读入,排序然后输出的方法
2019/07/20 Python
python动态文本进度条的实例代码
2020/01/22 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python 中的pygame安装与配置教程详解
2020/02/10 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
英国香水店:The Perfume Shop
2017/03/27 全球购物
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
.net工程师笔试题
2012/06/09 面试题
为什么需要版本控制
2016/10/28 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
环境科学专业个人求职信
2013/12/15 职场文书
计算机维护专业推荐信
2014/02/27 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
先进个人推荐材料
2014/12/29 职场文书
保研推荐信范文
2015/03/25 职场文书
2015年超市工作总结
2015/04/09 职场文书
2016年教师党员创先争优承诺书
2016/03/24 职场文书