Vue项目服务器部署之子目录部署方法


Posted in Javascript onMay 12, 2019

Vue项目尤其是基于.vue单文件格式的项目部署,在build成js文件后发布到服务器上,一般都是通过nginx反向代理到跟文件目录后直接访问,然而由于很多时候没办法使用更多的子域名(比如微信公众号只能有一个域名),所以急需将服务器部署到子目录。本经验以一次成功的系统部署为例,讲解子目录方式部署Vue工程。

首先介绍一下Poi,我们的项目没有使用webPack进行前端工程项目管理,使用了Poi进行管理:Develop web apps with no build configuration until you need.也就是说Poi对webpack进行了封装,0配置开发Web应用。可以使用poi.config.js文件配置poi的配置,也可以直接在package.json中进行配置。

Vue项目服务器部署之子目录部署方法

执行npm run dev相当于执行poi,执行npm run dist相当于执行poi build.执行poi build打包后,会将static目录下的资源拷贝到dist目录,其他的js和css会自动压缩成.js 和.css并且注入到index.html中。

Vue项目服务器部署之子目录部署方法

poi项目如果需要打包到子目录,必须设置homePage为子目录。这是第一步

Vue项目服务器部署之子目录部署方法

第二步,必须将index.html中其他非Vue部分的资源增加子目录的前缀,包括网站的icon.

Vue项目服务器部署之子目录部署方法

第三步保证Css文件中的资源路径为相对路径。

Vue项目服务器部署之子目录部署方法

第四步,需要修改vueRouter中的base为子目录。

Vue项目服务器部署之子目录部署方法

然后执行npm run dev 也就是npm build.观察打包后的index.html,css文件等。

Vue项目服务器部署之子目录部署方法

Vue项目服务器部署之子目录部署方法

然后配置nginx到二级目录:       

 location  /ticket {           alias /root/java/ticket/dist/;           try_files $uri $uri/ @rewrites;        }        location @rewrites {          rewrite ^/(ticket|sign|reimburse)/(.+)$ /$1/index.html last;        }这里$1对应url中的ticket,由于我这里有多个项目共用了rewrite所以逻辑或了三个,如果只有一个子目录,使用^/(ticket)/(

然后配置nginx到二级目录:        location  /ticket {           alias /root/java/ticket/dist/;           try_files $uri $uri/ @rewrites;        }        location @rewrites {          rewrite ^/(ticket|sign|reimburse)/(.+)$ /$1/index.html last;        }这里$1对应url中的ticket,由于我这里有多个项目共用了rewrite所以逻辑或了三个,如果只有一个子目录,使用^/(ticket)/(.+)$,这里切记要把ticket扩起来。

这里切记要把ticket扩起来。

项目部署成功!

Javascript 相关文章推荐
用jQuery简化JavaScript开发分析
Feb 19 Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
javascript中$(function() {});写与不写有哪些区别
Aug 10 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
JavaScript实现修改伪类样式
Nov 27 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 Javascript
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
详解vue身份认证管理和租户管理
May 25 Vue.js
vue配置接口域名方法总结
May 12 #Javascript
详解babel升级到7.X采坑总结
May 12 #Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
May 12 #Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 #Javascript
使vue实现jQuery调用的两种方法
May 12 #jQuery
React优化子组件render的使用
May 12 #Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 #Javascript
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
phpstorm 配置xdebug的示例代码
2019/03/31 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
createTextRange()的使用示例含文本框选中部分文字内容
2014/02/24 Javascript
基于jQuery实现二级下拉菜单效果
2016/02/01 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
2016/06/25 Javascript
json定义及jquery操作json的方法
2016/10/03 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
解决python3中cv2读取中文路径的问题
2018/12/05 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
详解Python装饰器
2019/03/25 Python
python异步编程 使用yield from过程解析
2019/09/25 Python
Python: glob匹配文件的操作
2020/12/11 Python
python 监控服务器是否有人远程登录(详细思路+代码)
2020/12/18 Python
CSS3中使用RGBa来调节透明度的教程
2016/05/09 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
2013/01/31 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
青年创业培训欢迎词
2014/01/10 职场文书
宿舍打麻将检讨书
2014/01/24 职场文书
酒店采购员岗位职责
2014/03/14 职场文书
初中英语演讲稿
2014/04/29 职场文书
学位证书委托书
2014/09/30 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
诚信考试承诺书范文
2015/04/29 职场文书
通用员工手册范本
2015/05/14 职场文书
二年级作文之动物作文
2019/11/13 职场文书
Python中的pprint模块
2021/11/27 Python