Vue+Vuetify项目直接访问子路由时Webpack加载build.js路径错误求助

嘿，这个问题我之前开发Vue单页应用的时候踩过一模一样的坑！咱们先拆解下原因：当你用Vue Router的history模式时，直接在地址栏输入子路径（比如/manage/products），浏览器会向服务器请求这个路径的资源，但服务器不知道这是前端路由，会返回404；同时Webpack默认用相对路径加载build.js，导致它会从/manage/dist/build.js去请求，自然找不到资源。

下面是通过修改webpack.config.js解决问题的关键步骤：

1. 配置Webpack的publicPath为绝对路径 #

打开你的webpack.config.js，找到output配置项，把publicPath设为以根目录开头的绝对路径：

module.exports = {
  // 其他配置项...
  output: {
    filename: 'build.js',
    // 重点：设置为绝对路径，确保资源从域名根目录加载
    publicPath: '/dist/'
  }
}

这样不管当前页面在哪个路由路径下，浏览器都会从http://你的域名/dist/build.js加载脚本，而不是相对当前路径的/manage/dist/build.js。

2. 开启Webpack Dev Server的historyApiFallback #

如果你用Webpack Dev Server做开发环境服务，必须添加这个配置，让服务器在找不到对应路径的资源时，返回项目的index.html（单页应用所有路由都依赖这个入口文件）：

module.exports = {
  // 其他配置项...
  devServer: {
    // 开启history模式的 fallback 支持
    historyApiFallback: true,
    // 其他Dev Server配置，比如port、hot等
  }
}

额外提示：确认Vue Router的模式 #

确保你的Vue Router用的是history模式（不是默认的hash模式），这也是出现这个问题的前提：

import VueRouter from 'vue-router'

const router = new VueRouter({
  mode: 'history', // 必须是history模式才会触发这类问题
  routes: [
    // 你的路由配置，比如{ path: '/manage/products', component: ProductManage }
  ]
})

做完这两步，再直接访问/manage/products试试：服务器会返回index.html，浏览器会从正确的根路径加载build.js，前端路由会接管页面渲染，就不会出现404和资源加载错误了。

注意：如果是生产环境部署，你还需要配置对应服务器（比如Nginx、Apache）的fallback规则，确保所有子路径都返回index.html，不过这部分不属于Webpack配置的范畴啦。

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