写在前面Vue-Router有两种模式，默认是hash模式，另一种是history模式。hash：即地址栏中的#符号。例如http://www.example/#/hello，哈希值为#/hello。特点：hash虽然出现在URL中，但不会包含在HTTP请求中，对后端没有任何影响。更改URL不会重新加载页面。history：使用HTML5HistoryInterface中新增的pushState()和replaceState()方法，无需重新加载页面即可完成URL跳转。（需要特定浏览器支持）hash和history这两种模式是基于浏览器本身的属性，而vue-router只是利用这两个特性（底层仍然是浏览器提供的接口）来实现front-结束路由。一般来说，两种模式都可以。除非你在乎那些不那么美好的#，否则你只能选择历史。这两种模式在开发环境中都不是什么大问题，但是部署到生产环境中，两者就不同了。hash方式部署是没有问题的，只要访问服务器上的index.html就可以访问网站了。history模式下，前端URL必须与实际向后端发起请求的URL一致，如http://www.example.com/user/id。如果后端缺少/user/id的路由处理，将返回404错误。不过要玩好这个模式，还需要后台配置支持……所以，需要在服务器端添加一个覆盖所有情况的候选资源：如果url没有匹配到任何静态资源，应该返回相同的index.htmlpage，这个页面就是你的app依赖的页面。-导致Vue-Router问题的原因是在做“年账单”项目时，在部署项目时，使用了hash模式。AndroidAPP分享的链接对#做了特殊处理，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根目录：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属性，Portalbasetype:string默认值:"/"应用的base路径。比如整个单页应用服务都在/app/下，那么base应该设置为“/app/”。于是，找到src/router/index.js，代码如下：//不影响本地开发，做完兼容processconstisHistoryMode=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-billlocation^~/h5-year-bill{root/home/web;索引index.html；try_files$uri$uri//h5-year-bill/index.htmllast;}/h5-year-bill/为部署的网站目录。完成这几项配置后，就可以访问子目录下的网站了，刷新也没有问题。
