问题
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
- 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 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.
In our routes file there are some nested paths such as /dashboards/sampleDashboard
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
This does not happen for 1-level paths such as /reports but only when we have a 2-level nested route.
回答1:
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: '../../'
to
publicPath: '../../../'
the above one is for 3 levels, you can change to any number of levels based on url depth
来源：https://stackoverflow.com/questions/44658791/vue-router-nested-paths-break-static-assets-path-on-manual-refresh