详解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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
JQuery下关于$.Ready()的分析
Dec 13 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
js实现对table动态添加、删除和更新的方法
Feb 10 Javascript
JavaScript中return false的用法
Mar 12 Javascript
Node.js中路径处理模块path详解
Nov 14 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 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
apache php模块整合操作指南
2012/11/16 PHP
php技术实现加载字体并保存成图片
2015/07/27 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP+ajax实现获取新闻数据简单示例
2018/05/08 PHP
Jquery Ajax.ashx 高效分页实现代码
2009/10/20 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
javascript回车完美实现tab切换功能
2014/03/13 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JSON格式化输出
2014/11/10 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
jquery实现简洁文件上传表单样式
2015/11/02 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
微信小程序 网络请求(GET请求)详解
2016/11/16 Javascript
浅谈Vue的基本应用
2016/12/27 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
2017/08/15 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
小试SVG之新手小白入门教程
2019/01/08 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
JavaScript实现无限轮播效果
2020/11/19 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
pymysql 开启调试模式的实现
2019/09/24 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
加拿大城市本地限时优惠:Buytopia.ca
2018/09/19 全球购物
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
陪护人员误工证明
2015/06/24 职场文书
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers
如何使用注解方式实现 Redis 分布式锁
2022/07/23 Redis