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

Posted 2023-02-22

【中文标题】Vue Router 嵌套路径会在手动刷新时破坏静态资产路径

【英文标题】：Vue Router nested paths break static assets path on manual refresh

【发布时间】：2017-11-23 08:04:02

【问题描述】：

我们使用带有 vue-cli Webpack 样板的 VueJS 2.x，以及 Vue Router。我们遇到了一个问题，会发生以下情况

我们的静态资源位于根级static文件夹中

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

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

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

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

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

这不会发生在诸如 /reports 这样的 1 级路径中，但只有当我们有 2 级嵌套路由时才会发生。

【问题讨论】：

我在这里遇到了同样的问题。有什么解决办法吗？

不是永久解决方案。我在某处读到将您的基本 href 设置为 '/' 可以解决问题，并且确实如此。但是，我们从“domainName/subfolder/”为我们的网站提供服务，因此我们的基本 href 需要是“/subfolder/”。这样做会再次导致 2 级嵌套路径出现相同的问题。它在手动/硬刷新时​​出现以下错误：` 资源解释为样式表，但使用 MIME 类型 text/html 传输：“trials-int.nci.nih.gov/strap/dashboards/static/layouts/theme/…”。

在编译的 JS 文件中，错误是：Uncaught SyntaxError: Unexpected token

您可以在主题CSS文件的路径中看到，它将CSS文件的相对路径附加到嵌套路径而不是域名/子文件夹/。这只发生在手动/硬刷新时​​。到目前为止，我还没有找到解决方案，但确实需要一个。

我通过从静态资产中删除一个点解决了同样的问题：从<link rel="stylesheet" href="./build/main.min.css" type="text/css"> 到<link rel="stylesheet" href="/build/main.min.css" type="text/css">

【参考方案1】：

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

publicPath: '../../'

到

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

以上是3级，可以根据url深度更改为任意级数