vue-router history模式下本地开发如果手动刷新就会加载线上的js文件怎么办?

发布于 2022-09-12 00:24:06 字数 1809 浏览 14 评论 0

最近项目组有一个项目用的vue-cli3.0,vue-router采用的history模式以解决url有'#'这个问题。然而现在导致另一个问题,就是设置了proxy代理之后,加载的js变成了服务器上的js,如果不禁用缓存就会读取from disk cache,如果禁用缓存就会从服务器请求。
(以前这个项目组不懂proxy,所以是把域名写死,然后打包的时候再根据环境修改域名和端口号,就这样上线了。现在我来了后提出可以这样修改,结果今天设置了代理后就出现了问题)
先上配置!
vue.config.js
1.png
其中historyApiFallback是发现这个问题后,各种百度搜出来的结果,然而并没有用。
再说问题
项目正常打开,没有问题,接口也正常请求,代理是成功的(打码的是2个请求,成功)
可以看到入口是localhost,js是dev内存中的js文件
2.png
然而手动刷新后,入口也变了(对history来说是正常的),然后静态文件都变了,变得和线上项目加载的静态文件一样,js,css都是build之后的文件。
3.png
从入口点进去看里面的内容
5.png
复制出来,可以看到实际是打包过后的index.html
4.png
。以上。
接下来说我想办法解决的过程,实际(没解决)。
首先看官网,官网说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
image.png
然后结合现象问题,我猜想,本地手动刷新之后,触发了nginx的配置,给重定向到了服务器的index.html,于是加载了服务器的静态文件。
然后看了后台的nginx配置,看起来就是login和/都被重定向了。
image.png
调试过程
把路由改成hash模式不会复现问题,所以确定是history路由特有的。
后台根据vue官网的推荐修改nginx配置,不能解决问题。
配置了historyApiFallback不能解决问题。
那么该如何解决呢?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

痴骨ら 2022-09-19 00:24:06

都忘记我提了这个问题了,方法是在proxyTable里配置bypass
参考链接:
https://www.webpackjs.com/con...

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文