详解Vue项目部署遇到的问题及解决方案


Posted in Javascript onJanuary 11, 2019

写在前面

Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式。

  • hash:也就是地址栏里的 # 符号。比如 http://www.example/#/hello,hash 的值为 #/hello。特点:hash 虽然出现 URL 中,但不会被包含在 HTTP 请求中,对后端不会产生什么影响,改变 URL 不会重载页面。
  • history:利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法,来完成 URL 跳转而无须重新加载页面。(需要特定浏览器支持)

hash 和 history 两种模式都是基于浏览器自身的属性,vue-router 只是利用了这两个特性(底层还是浏览器提供的接口)来实现前端路由。

使用场景

一般来说,两种模式都是可以的。除非在意不太漂亮的 #,只能选择 history。

这两种模式在开发环境下都没有什么太大的问题,但是当部署到生产环境中后,两者有所不同。

hash 模式部署没有什么问题,只要访问到服务器上的 index.html,就可以访问网站了。
history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.example.com/user/id。如果后端缺少对 /user/id 的路由处理,将返回 404 错误。

不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。- Vue-Router

问题起因

在做「年度账单」项目的时候,项目部署的时候,用的是 hash 模式。APP安卓端分享出去的链接对于 # 做了特殊处理,encode 转义成了 %23,所以路由只能换成 history 的模式。

因此,现把解决的思路总结下,虽然 官网 上给出了解决方案,但在实际的编码中也遇到了一些问题。

根目录下

当项目在根目录下部署的时候(如 http://www.example.com/),vue 的相关文件默认不需要修改,修改的是后端,这里以 nginx 为例。

location / {
 try_files $uri $uri/ /index.html;
}

$uri 就是访问的 url,不包含 域名 和 querystring。例如 /test/hello 当访问 $uri 时,如果存在,则访问 $uri/, 不存在就访问 /index.html 这样配置好,访问 http://example.com/ 时就可以访问到网站了,进入多级目录后刷新页面也不会存在问题。

子级目录下

这里涉及到修改 vue 项目几个配置文件。

先定义几个环境

  • 部署的域名:http://www.example.com:8080/
  • nginx 的 root 目录:home/web/
  • vue 的部署路径:home/web/h5-year-bill/
  • vue 项目的链接:http://www.example/h5-year-bill/
  • vue 项目的静态资源路径:http://www.example/h5-year-bill/static/

1. 打包后的静态资源路径需要修改

找到 build/config/index.js,代码如下:

...
build: {
...
- assetsPublicPath
  // 访问路径,修改成绝对路径
+ assetsPublicPath: '/h5-year-bill/'
}

2. 路由文件

Vue-Router 有一个 base 属性, 传送门

base
类型: string
默认值: "/"
应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 base 就应该设为 "/app/"

因此,找到 src/router/index.js,代码如下:

// 不影响本地开发,兼容性做了处理
const isHistoryMode = process.env.NODE_ENV === 'production' ? {
 mode: 'history',
 base: '/h5-year-bill/'
} : {
 mode: 'hash'
};

const router = new Router({
 ...isHistoryMode,
 routes
});

至此,打包配置的相关修改已全部完成,项目也能够正常访问。

但还是会有一个问题,跳转到某个路由后,刷新页面,就会出现页面空白,或者路由不通,此时就要修改 nginx 的配置了。

3. nginx 配置相关修改

nginx部署路径/conf/nginx.conf,修改如下:

#h5-year-bill
location ^~ /h5-year-bill {
 root /home/web;
 index index.html;
 try_files $uri $uri/ /h5-year-bill/index.html last;
}

/h5-year-bill/ 就是部署的网站目录。

这样几项配置后,就可以在子目录下访问网站,刷新也没有问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
jQuery弹出遮罩层效果完整示例
Sep 13 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
微信小程序调用后台service教程详解
Nov 06 Javascript
EXTJS7实现点击拖拉选择文本
Dec 17 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 #Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 #Javascript
微信公众号H5支付接口调用方法
Jan 10 #Javascript
详解在Node.js中发起HTTP请求的5种方法
Jan 10 #Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 #Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 #Javascript
最简单的JS实现json转csv的方法
Jan 10 #Javascript
You might like
非洲第一个咖啡超凡杯大赛承办国—卢旺达的咖啡怎么样
2021/03/03 咖啡文化
php ci框架验证码实例分析
2013/06/26 PHP
PHP curl模拟登录带验证码的网站
2015/11/30 PHP
用户注册常用javascript代码
2009/08/29 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
js 三级关联菜单效果实例
2013/08/13 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
javascript实现设置、获取和删除Cookie的方法
2015/06/01 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
Angular.js中下拉框实现渲染html的方法
2017/06/18 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
浅谈Angular文字折叠展开组件的原理分析
2017/11/24 Javascript
微信小程序中使用ECharts 异步加载数据的方法
2018/06/27 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
vue实现标签云效果的示例
2020/11/09 Javascript
python脚本设置系统时间的两种方法
2016/02/21 Python
python+matplotlib绘制3D条形图实例代码
2018/01/17 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
浅谈Scrapy网络爬虫框架的工作原理和数据采集
2019/02/07 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
用python3读取python2的pickle数据方式
2019/12/25 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
介绍一下SQL中union,intersect和minus
2012/04/05 面试题
服装发布会策划方案
2014/05/22 职场文书
城镇居民医疗保险工作总结
2015/08/10 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书