Vue Router 的资源路径在重新加载时中断答案

【问题标题】：Vue Router’s paths to assets break on reloadVue Router 的资源路径在重新加载时中断
【发布时间】：2020-09-03 23:37:09
【问题描述】：

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

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

如果我通过应用程序链接导航到嵌套页面，一切正常，但如果我尝试重新加载嵌套页面，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

【问题讨论】：

检查您的 publicPath 的值是否适合您的用例 (cli.vuejs.org/config/#publicpath)
我已经尝试在我的项目的根目录下创建一个vue.config.js 文件，但是我在publicPath 中输入的任何内容似乎都没有改变任何东西。这似乎是一个 Vue Cli 配置，我不使用它。
如果您不使用publicPath，则默认为/ - 这意味着您应该将应用程序部署在域名的根文件夹中。否则它将无法正常工作 - 例如如果您改为部署在/fr 文件夹中。
它甚至还没有部署，它正在使用 Webpack dev-server 运行，在 localhost:8080...我什至不知道在 publicPath 中放什么而不是 "/"。
如果您正在运行webpack-dev-server，那么/dist 是不可能的，因为它（dev 服务器）从 RAM 中提供所有服务。 /dist 文件夹仅用于部署 - 不用于开发。

标签： vue.js webpack vue-router

【解决方案1】：

最后通过在我的 Webpack 配置（不是 Vue 配置）中设置 publicPath: '/' 解决了这个问题。下面是它的外观：

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

【讨论】：