多个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 相关文章推荐
js confirm()方法的使用方法实例
Jul 13 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
javascript生成json数据简单示例分享
Feb 14 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
js类定义函数时用prototype与不用的区别示例介绍
Jun 10 Javascript
JavaScript操作Oracle数据库示例
Mar 06 Javascript
Javascript动画效果(3)
Oct 11 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
react-router JS 控制路由跳转实例
Jun 15 Javascript
原生JS实现的自动轮播图功能详解
Dec 28 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 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基于PDO调用sqlserver存储过程通用方法【基于Yii框架】
2017/10/07 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
吐槽一下我所了解的Node.js
2014/10/08 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
js实现延迟加载的几种方法
2017/04/24 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python保存文件方法小结
2018/07/27 Python
python实现一行输入多个值和一行输出多个值的例子
2019/07/16 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python模块的定义,模块的导入,__name__用法实例分析
2020/01/07 Python
浅谈keras保存模型中的save()和save_weights()区别
2020/05/21 Python
Python-opencv实现红绿两色识别操作
2020/06/04 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
波兰品牌内衣及泳装网上商店:Astratex.pl
2017/02/03 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
如何写出高性能的JSP和Servlet
2013/01/22 面试题
医学院护理专业应届生求职信
2013/11/12 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
新闻报道策划方案
2014/06/11 职场文书
销售岗位职责范本
2014/06/12 职场文书
教师求职自荐书
2014/06/14 职场文书
欢迎标语大全
2014/06/21 职场文书
班主任经验交流材料
2014/12/16 职场文书
国家助学金感谢信
2015/01/21 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2015年检验科工作总结
2015/04/27 职场文书