webpack - Vue Router 嵌套路径在手动刷新时破坏静态 Assets 路径

Question

我们使用 VueJS 2.x 和 vue-cli Webpack 样板，以及 Vue Router。我们遇到了以下情况的问题

我们的静态 Assets 位于根级静态文件夹

Assets 路径在 Webpack config/index.js 文件中定义如下:

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

Vue Router 以历史模式运行，我们遵循了官方文档。用于在历史模式下运行路由器时包含所需的 Apache 重写规则。

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

通过站点导航导航到嵌套路径时，一切正常。但是，手动导航(或刷新浏览器)会破坏静态 Assets 路径。此时的静态 Assets 路径包括嵌套路由路径，例如 http://localhost:5001/static/bootstrap/boostrap.min.css变成 http://localhost:5001/dashboards/static/bootstrap/boostrap.min.css

对于 1 级路径(例如/reports)不会发生这种情况，但仅当我们有 2 级嵌套路由时才会发生这种情况。

Answer 1

在 vue-cli 2.* 版本的 webpack 样板模板中，在 webpack.base.conf.js 文件中，您必须从

publicPath: '../../'

到

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

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