Vue Router 嵌套路径在手动刷新时破坏静态资产路径 [英] Vue Router nested paths break static assets path on manual refresh

问题描述

我们将 VueJS 2.x 与 vue-cli Webpack 样板以及 Vue Router 一起使用.我们遇到了以下问题

We're using VueJS 2.x with the vue-cli Webpack boilerplate, along with Vue Router. We've run into a problem where the following happens

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

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

• Our static assets sit in a root level static folder

• The assets paths are defined as follows in Webpack config/index.js file:

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

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

Vue Router is running in history mode and we followed the official docs. for including the required Apache rewrite rule while running the router in history mode.

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

In our routes file there are some nested paths such as /dashboards/sampleDashboard

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

When navigating to a nested path via the site navigation everything works fine. However, navigating manually (or doing a browser refresh) breaks the static assets path. The static assets path at this point includes the nested route path so something like http://localhost:5001/static/bootstrap/boostrap.min.css turns into http://localhost:5001/dashboards/static/bootstrap/boostrap.min.css

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

This does not happen for 1-level paths such as /reports but only when we have a 2-level nested route.

推荐答案

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

In webpack boilerplate templates for vue-cli 2.* versions, in webpack.base.conf.js file you have to change publicPath for fonts and images from

publicPath: '../../'

到

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

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

the above one is for 3 levels, you can change to any number of levels based on url depth

这篇关于Vue Router 嵌套路径在手动刷新时破坏静态资产路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！