详解Vue项目部署遇到的问题及解决方案
写在前面
Vue-Router有两种模式，默认是hash模式，另外一种是history模式。
- hash：也就是地址栏里的#符号。比如http://www.example/#/hello，hash的值为#/hello。特点：hash虽然出现URL中，但不会被包含在HTTP请求中，对后端不会产生什么影响，改变URL不会重载页面。
- history：利用了HTML5HistoryInterface中新增的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，代码如下：
//不影响本地开发，兼容性做了处理
constisHistoryMode=process.env.NODE_ENV==='production'?{
mode:'history',
base:'/h5-year-bill/'
}:{
mode:'hash'
};
constrouter=newRouter({
...isHistoryMode,
routes
});
至此，打包配置的相关修改已全部完成，项目也能够正常访问。
但还是会有一个问题，跳转到某个路由后，刷新页面，就会出现页面空白，或者路由不通，此时就要修改nginx的配置了。
3.nginx配置相关修改
nginx部署路径/conf/nginx.conf，修改如下：
#h5-year-bill
location^~/h5-year-bill{
root/home/web;
indexindex.html;
try_files$uri$uri//h5-year-bill/index.htmllast;
}
/h5-year-bill/就是部署的网站目录。
这样几项配置后，就可以在子目录下访问网站，刷新也没有问题。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。