多个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 ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
IE6浏览器下resize事件被执行了多次解决方法
Dec 11 Javascript
window.location不跳转的问题解决方法
Apr 17 Javascript
node.js中watch机制详解
Nov 17 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
javascript中利用柯里化函数实现bind方法
Apr 29 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
jQuery判断邮箱格式对错实例代码讲解
Apr 12 jQuery
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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实现基于3DES算法加密解密字符串示例
2018/08/24 PHP
PHP Trait代码复用类与多继承实现方法详解
2019/06/17 PHP
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
javascript获取四位数字或者字母的随机数
2015/01/09 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python每天必学之bytes字节
2016/01/28 Python
python日志记录模块实例及改进
2017/02/12 Python
Python自动发邮件脚本
2017/03/31 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python 利用pandas将arff文件转csv文件的方法
2019/02/12 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python 标准差计算的实现(std)
2019/07/29 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
联想德国官网:Lenovo Germany
2018/07/04 全球购物
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
经典c++面试题三
2015/07/08 面试题
销售人员自我评价
2014/02/01 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
如何写好自荐信
2014/04/07 职场文书
销售员未完成销售业绩的检讨书
2014/10/12 职场文书
2014年技术部工作总结
2014/12/12 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
网络管理员岗位职责
2015/02/12 职场文书
出国留学导师推荐信
2015/03/26 职场文书
详解JAVA中的OPTIONAL
2021/06/14 Java/Android
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android