多个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去除空格的几种方法
Oct 03 Javascript
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JS实现Enter键跳转及控件获得焦点
Aug 12 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
详解微信小程序 wx.uploadFile 的编码坑
Jan 23 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
JS实现字体背景跑马灯
Jan 06 Javascript
vue实现购物车结算功能
Jun 18 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
IIS+fastcgi下PHP运行超时问题的解决办法详解
2013/06/20 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
js 图片等比例缩放代码
2010/05/13 Javascript
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
javascript比较两个日期相差天数的方法
2015/07/23 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
2016/11/10 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
python操作 hbase 数据的方法
2016/12/18 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Python配置虚拟环境图文步骤
2019/05/20 Python
Python Numpy计算各类距离的方法
2019/07/05 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python爬取365好书中小说代码实例
2020/02/28 Python
浅谈django 重载str 方法
2020/05/19 Python
python如何停止递归
2020/09/09 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
应届生法律求职信
2013/10/22 职场文书
迟到检讨书1000字
2014/01/15 职场文书
新员工入职感言
2014/02/01 职场文书
安全责任书模板
2014/07/22 职场文书
目标责任书格式
2014/07/28 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
搬迁通知
2015/04/20 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
校园安全学习心得体会
2016/01/18 职场文书