详解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 相关文章推荐
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
JS实现面向对象继承的5种方式分析
Jul 21 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
小程序实现筛子抽奖
May 26 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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
jQuery Ajax异步处理Json数据详解
2013/11/05 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
JavaScript中的style.cssText使用教程
2014/11/06 Javascript
Flow之一个新的Javascript静态类型检查器
2015/12/21 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
2017/08/14 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
JS实现根据详细地址获取经纬度功能示例
2019/04/16 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
2020/02/11 Javascript
JavaScript实现HSL拾色器
2020/05/21 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[01:23:24]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第三场 2月7日
2021/03/11 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
python安装教程 Pycharm安装详细教程
2017/05/02 Python
python使用tornado实现简单爬虫
2018/07/28 Python
Python检查ping终端的方法
2019/01/26 Python
python multiprocessing多进程变量共享与加锁的实现
2019/10/02 Python
Python Sympy计算梯度、散度和旋度的实例
2019/12/06 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
音乐表演专业毕业生求职信
2013/10/14 职场文书
中专生职业生涯规划书范文
2014/01/10 职场文书
销售辞职报告范文
2014/01/12 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
元旦晚会策划方案
2014/02/18 职场文书
清扬洗发水广告词
2014/03/14 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python