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 相关文章推荐
JavaScript之自定义类型
May 04 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
Jan 22 Javascript
AngularJS控制器之间的数据共享及通信详解
Aug 01 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
Jan 25 Javascript
微信小程序实现自动定位功能
Oct 31 Javascript
Vue将页面导出为图片或者PDF
Aug 17 Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
Aug 22 Javascript
Nest.js 授权验证的方法示例
Feb 22 Javascript
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正确配置mysql(apache环境)
2011/08/28 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
详解PHP+AJAX无刷新分页实现方法
2015/11/03 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
jquery放大镜效果超漂亮噢
2013/11/15 Javascript
javascript 终止函数执行操作
2014/02/14 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
2017/02/10 Javascript
利用nodejs监控文件变化并使用sftp上传到服务器
2017/02/18 NodeJs
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
jQuery实现 上升、下降、删除、添加一行代码
2017/03/06 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
jQuery动画_动力节点节点Java学院整理
2017/07/04 jQuery
vue+element搭建后台小总结 el-dropdown下拉功能
2020/04/10 Javascript
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
Python中with及contextlib的用法详解
2017/06/08 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
Django框架用户注销功能实现方法分析
2019/05/28 Python
python简单实现最大似然估计&scipy库的使用详解
2020/04/15 Python
为什么要有struct关键字
2012/05/08 面试题
自考生自我鉴定范文
2013/10/01 职场文书
合伙经营协议书范本
2014/04/18 职场文书
高一学生期末评语
2014/04/25 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
公务员爱岗敬业演讲稿
2014/08/26 职场文书
学生上课说话检讨书
2014/10/25 职场文书
大学生思想道德自我评价
2015/03/09 职场文书