Vue 路由器的资源路径在重新加载时中断

Question

我正在使用 Webpack 4.43、Vue 2.6.11 和 Vue Router 3.1.6

Webpack 生成一个包含bundle.js和index.html的dist文件夹。

如果我通过应用程序链接导航到嵌套页面，一切正常，但是如果我尝试重新加载嵌套页面，index.html无法加载bundle.js，因为它尝试在嵌套页面级别找到它。例如，如果我去localhost:8080/fr/contact它会尝试加载localhost:8080/fr/bundle.js

我看过许多其他相关主题，但没有人给出真正的答案。有人有解决方案吗？

编辑：不知道它是否有帮助，但我刚刚意识到即使我通过router-links到达它们，图像也不会在嵌套页面中加载。同样的问题：它寻找localhost:8080/fr/my-image.png而不是localhost:8080/my-image.png

Answer 1

最后通过在我的 Webpack 配置(不是 Vue 配置(中设置publicPath: '/'来解决它。下面是它的外观：

module.exports = {
...
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/'
},
...
}