详解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 相关文章推荐
escape、encodeURI 和 encodeURIComponent 的区别
Mar 02 Javascript
javascript 进度条 实现代码
Jul 30 Javascript
javascript concat数组累加 示例
Sep 03 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
微信小程序开发的四十个技术窍门总结(推荐)
Jan 23 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
ES6字符串的扩展实例
Dec 21 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
php 论坛采集程序 模拟登陆,抓取页面 实现代码
2009/07/09 PHP
利用浏览器的Javascript控制台调试PHP程序
2014/01/08 PHP
PHP中读取文件的8种方法和代码实例
2014/08/05 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
js中的this关键字详解
2013/09/25 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
JavaScript设计模式之工厂模式和构造器模式
2015/02/11 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
Jquery判断form表单数据是否变化
2016/03/30 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
使用koa2创建web项目的方法步骤
2019/03/12 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
对Python获取屏幕截图的4种方法详解
2019/08/27 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python用什么编辑器进行项目开发
2020/06/17 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
如何查找和删除数据库中的重复数据
2014/11/05 面试题
四风对照检查材料范文
2014/09/27 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
家长会主持词开场白
2015/05/29 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技