vue-router history模式下本地开发如果手动刷新就会加载线上的js文件怎么办?
最近项目组有一个项目用的vue-cli3.0,vue-router采用的history模式以解决url有'#'这个问题。然而现在导致另一个问题,就是设置了proxy代理之后,加载的js变成了服务器上的js,如果不禁用缓存就会读取from disk cache,如果禁用缓存就会从服务器请求。
(以前这个项目组不懂proxy,所以是把域名写死,然后打包的时候再根据环境修改域名和端口号,就这样上线了。现在我来了后提出可以这样修改,结果今天设置了代理后就出现了问题)
先上配置!
vue.config.js
其中historyApiFallback是发现这个问题后,各种百度搜出来的结果,然而并没有用。
再说问题
项目正常打开,没有问题,接口也正常请求,代理是成功的(打码的是2个请求,成功)
可以看到入口是localhost,js是dev内存中的js文件
然而手动刷新后,入口也变了(对history来说是正常的),然后静态文件都变了,变得和线上项目加载的静态文件一样,js,css都是build之后的文件。
从入口点进去看里面的内容
复制出来,可以看到实际是打包过后的index.html
。以上。
接下来说我想办法解决的过程,实际(没解决)。
首先看官网,官网说history请求的是真实的路由,上线后如果刷新,就会向服务器请求这个路由,但是后台实际没有,就404,所以需要后台的配合,nginx要如何设置云云。意思就是404全部转到index.html(服务器上的index.html),这样就不会404了。
后来,看官网
https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
然后结合现象问题,我猜想,本地手动刷新之后,触发了nginx的配置,给重定向到了服务器的index.html,于是加载了服务器的静态文件。
然后看了后台的nginx配置,看起来就是login和/都被重定向了。
调试过程
把路由改成hash模式不会复现问题,所以确定是history路由特有的。
后台根据vue官网的推荐修改nginx配置,不能解决问题。
配置了historyApiFallback不能解决问题。
那么该如何解决呢?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
都忘记我提了这个问题了,方法是在proxyTable里配置bypass
参考链接:
https://www.webpackjs.com/con...