Vue-router生产构建后始终跳转到错误路由问题排查

看起来你遇到的核心问题是生产构建后资源路径配置错误，导致build.js加载失败，进而引发路由跳转异常。咱们一步步来排查修复：

第一步：修正资源公共路径配置 #

打开你的config/index.js，找到build配置项里的assetsPublicPath——这是生产环境下资源文件的基础URL，默认是'/'，但如果你的项目部署在http://localhost/ndvc/dist/这样的子目录下，这个绝对路径会让浏览器去根目录找资源，自然会出现404错误。

根据你的部署路径调整这个配置：

• 如果固定部署在/ndvc/dist/子目录，就设置为：

  assetsPublicPath: '/ndvc/dist/'
  

• 要是不确定最终部署路径，或者想让资源路径自适应，也可以设为相对路径：

  assetsPublicPath: './'
  

第二步：适配路由的base配置（若使用history模式） #

如果你的路由开启了mode: 'history'，还需要在路由实例里设置base属性，和上面的assetsPublicPath保持一致，避免路由跳转时路径错位：

const router = new VueRouter({
  mode: 'history',
  base: '/ndvc/dist/', // 匹配部署的子目录路径
  routes: [...]
})

第三步：重新构建验证 #

修改完配置后，重新执行npm run build，把dist目录的文件放到服务器对应位置（比如localhost/ndvc/dist/目录下），再访问页面：

• 先看控制台是否还有资源加载错误，若没有，再测试各个路由是否能正常跳转。

补充：为什么开发模式没问题？ #

开发模式下，Vue CLI的dev-server会自动代理处理所有资源路径，所有文件都是通过开发服务器加载的，不会出现路径不匹配的问题；但生产构建后是纯静态文件，完全依赖你配置的路径规则加载，所以必须确保assetsPublicPath和部署环境完全匹配。

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