关于vue项目中history模式下静态资源路径错误的问题和assetsPublicPath的相关配置

背景

在做QQ第三方登陆时,一直报错回调域错误，貌似是回调域里不能有"#"字符，所以决定使用history的路由模式，后台node通过connect-history-api-fallback插件配置.

问题

配置完成之后发现，访问页面根目录的时候一切正常，但是QQ第三方登陆成功跳回回调域路由的时候，即lppwork.cn/memo/qqlogin?code=****的时候，页面空白只显示了返回的数据，控制台报错资源请求错误.

解决

其实是因为静态资源路径指向错误，在使用history路由模式的时候,需要把，config>index.js 下，把build的assetsPublicPath:'./',改成assetsPublicPath:'/';

我的原因

因为一般vue脚手架的默认路由配置时hash模式，为了解决直接打开打包文件页面空白的问题，会在config>index.js 下，把build的assetsPublicPath:'/',改成assetsPublicPath:'./';
但变成history路由模式时，就要改回来

分析

首先概念:

1. assetsPublicPath指静态资源的引用路径，默认配置为 /，即网站(项目)根目录，’./'指的是当前目录。与 assetsSubDirectory组合起来就是完整的静态资源引用路径 /static。
2. 清楚history跟hash的区别,大概讲就是history不同的路由和页面对应不同的index.html，而hash是使用vue-router模拟的路由，实际上都是一个index.html

总结

1. 在history模式并且使用 assetsPublicPath:'./'时，访问网站根目录lppwork.cn时，请求路径没有问题的,因为当前目录就是根目录，但当访问了lppwork.cn/memo/qqlogin?code=*****路由时，他的请求路径会指向当前路由对应的静态文件，比如http://lppwork.cn/memo/static/js/manifest.cb27dd1efb79f9ee627b.js,但在该目录下我们没有静态文件(因为我们后端配置history所用到的connect-history-api-fallback 仍是把请求定位到一个index.html，也就是根目录的那个,这就相当于在index.html里添加了一个指向 http://lppwork.cn/memo/static/js/manifest.cb27dd1efb79f9ee627b.js的script标签，而正确的路径应该是http://lppwork.cn/static/js/manifest.cb27dd1efb79f9ee627b.js或者说是/static/js/manifest.cb27dd1efb79f9ee627b.js， 所以当然取不到资源.

2. 而当只有assetsPublicPath:'/'时，不管在哪一个路由，请求的都是根路径的资源，即都是指向http://lppwork.cn/static/js/manifest.cb27dd1efb79f9ee627b.js (正确)

3. 为什么使用hash路由模式时不会出现这种情况呢？因为hash是模拟路由，并不是真正的路由，所以不管页面访问那个路由，实际上都是访问根路径的index.html，所以assetsPublicPath 不管是 / 还是 ./ 都能指向对的资源

个人网站: lppwork.cn.可以同步备忘录的功能网站，持续开发中…
以上，如有错误，欢迎指出.

参考文章

[1]:链接: https://juejin.im/post/5cf5468cf265da1b9612ef64.
[2]:链接: https://blog.csdn.net/u010276653/article/details/79821669.