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 相关文章推荐
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
Jan 08 Javascript
JS中判断null的方法分析
Nov 21 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
VUE搭建手机商城心得和遇到的坑
Feb 21 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
实例分析javascript中的异步
Jun 02 Javascript
vue elementui tree 任意级别拖拽功能代码
Aug 31 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
咖啡是不是喝了会上瘾?咖啡是必须品吗!
2021/03/04 新手入门
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
分享PHP-pcntl 实现多进程代码
2016/09/30 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
javascript中的array数组使用技巧
2010/01/31 Javascript
javascript天然的迭代器
2010/10/29 Javascript
修复IE9&safari 的sort方法
2011/10/21 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
js获取页面引用的css样式表中的属性值方法(推荐)
2016/08/19 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
2017/01/17 Javascript
vue通过点击事件读取音频文件的方法
2018/05/30 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
js中的reduce()函数讲解
2019/01/18 Javascript
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
2019/05/04 jQuery
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
Python设置在shell脚本中自动补全功能的方法
2018/06/25 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python scrapy重复执行实现代码详解
2019/12/28 Python
Python 实现加密过的PDF文件转WORD格式
2020/02/04 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
解决c++调用python中文乱码问题
2020/07/29 Python
python openCV自制绘画板
2020/10/27 Python
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
海量信息软件测试笔试题
2015/08/08 面试题
教师对学生的寄语
2014/04/03 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
停车位租赁协议书
2014/09/24 职场文书
党支部遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
关于群众路线的心得体会
2014/11/05 职场文书
个人自荐书怎么写
2015/03/26 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android