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.min.css

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

Answer 1

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

publicPath: '../../'

到

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

以上是3个级别，您可以根据网址深度更改为任意级别