Vue Router的嵌套路径在手动刷新时会破坏静态资产路径

Question

我们正在将VueJS 2.x与vue-cli Webpack样板一起使用，以及Vue Router。我们遇到了以下情况发生的问题

• 我们的静态资产位于根级别的静态文件夹中

• 资产路径在Webpack config / index.js文件中定义如下：

  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  

• Vue Router以历史记录模式运行，我们遵循了官方文档。在历史记录模式下运行路由器时包括必需的Apache重写规则。

在我们的路线文件中，有一些嵌套路径，例如/ dashboards / sampleDashboard

通过站点导航导航到嵌套路径时，一切正常。但是，手动导航（或执行浏览器刷新）会破坏静态资产路径。此时的静态资产路径包括嵌套的路由路径，因此类似http：// localhost：5001 / static / bootstrap / boostrap.min.css的内容将变为http：// localhost：5001 / dashboards / static / bootstrap / boostrap。最小css

对于1级路径（例如/ reports），这不会发生，只有在我们具有2级嵌套路由时才发生。

Answer 1

在 vue-cli 2.* 版本的 webpack 样板模板中，在 webpack.base.conf.js 文件中，您必须更改字体和图像的 publicPath

publicPath: '../../'

到

publicPath: '../../../'

上面的是 3 级，您可以根据 url 深度更改为任意数量的级别