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 相关文章推荐
{}与function(){}选用空对象{}来存放keyValue
May 23 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
Javascript无参数和有参数类继承问题解决方法
Mar 02 Javascript
js动态生成form 并用ajax方式提交的实现方法
Sep 09 Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 Javascript
详解开源的JavaScript插件化框架MinimaJS
Oct 26 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
微信小程序网络请求实现过程解析
Nov 06 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 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/01 无线电
php 魔术方法使用说明
2009/10/20 PHP
Prototype使用指南之range.js
2007/01/10 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
JQUERY dialog的用法详细解析
2013/12/19 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
vscode下的vue文件格式化问题
2018/11/28 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
JavaScript创建、读取和删除cookie
2019/09/03 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python模拟Django框架实例
2016/05/17 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
深入解析神经网络从原理到实现
2019/07/26 Python
python 实现"神经衰弱"翻牌游戏
2020/11/09 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
adidas泰国官网:adidas TH
2020/07/11 全球购物
Java面试题及答案
2012/09/08 面试题
一个SQL面试题
2014/08/21 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
主持人演讲稿范文
2013/12/28 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
感恩教育活动总结
2014/05/05 职场文书
读群众路线的心得体会
2014/09/03 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
产品质量保证书范本
2015/02/27 职场文书
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
Python词云的正确实现方法实例
2021/05/08 Python
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL