Vue+Webpack子路由刷新后资源路径异常的配置问题求助

兄弟，这个坑我踩过好几次！你遇到的问题本质是静态资源的根路径配置不对，加上子路由的路径影响了浏览器对资源路径的解析。

问题原因 #

你注释掉了assetsPublicPath: '/'，这个配置是告诉Webpack所有静态资源的基准路径是网站根目录（/）。当你在子路由localhost:8080/user/config/刷新时，浏览器会把当前路由的路径/user/config/当成相对路径的基准，所以请求静态资源时就自动加上了/user前缀，变成了/user/static/css，而不是你想要的根路径下的/static/css。

解决方案 #

1. 恢复assetsPublicPath配置

直接把你dev配置里注释掉的那行取消注释，让Webpack明确知道静态资源的根路径是/：

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: true,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/', // 取消注释这一行！
  proxyTable: {},
  // CSS Sourcemaps off by default because relative...
}

2. （可选）如果用了Vue Router的history模式

要是你的路由用的是history模式（不是默认的hash模式），除了上面的配置，开发环境下Webpack Dev Server已经帮你处理了刷新404的问题，但生产环境部署时，你需要在服务器（比如Nginx）上配置rewrite规则，把所有请求都指向index.html，不然刷新子路由会出现404错误。不过这一步不影响当前的资源路径问题，只是提前给你提个醒。

3. 验证修改

重启你的Webpack开发服务器，进入子路由后按F5刷新，看看浏览器的网络请求里，静态资源的路径是不是已经变成localhost:8080/static/css了，应该就正常了！

内容的提问来源于stack exchange，提问作者Beliaf