VueJS构建至文件夹后路由功能失效问题求助

嗨，针对你遇到的Vue项目构建后路由无法工作的问题，结合你给出的config/index.js配置，我整理了几个最常见的排查方向和解决办法：

1. 先排查路由模式的问题 #

如果你的路由用了history模式（默认是带#的hash模式），Surge、Netlify这类静态托管平台默认不会处理history模式下的页面刷新/直接访问子路由请求——这时候浏览器会直接向服务器请求对应路径的文件，但服务器上根本没有这个文件，自然就会出现404或路由失效的情况。

• 解决办法很简单：在项目根目录新建一个_redirects文件，内容就一行：

  /*    /index.html   200
  

  构建后把这个文件一起放到dist目录里上传，就能让所有请求都 fallback 到index.html，路由就能正常工作了。
• 如果你不确定是不是模式的问题，可以先临时把路由切换回hash模式试试：在src/router/index.js里注释掉mode: 'history'这行，构建后再测试，要是能正常访问，那就是history模式的服务器配置问题。

2. 确认assetsPublicPath和路由基路径是否匹配 #

你的assetsPublicPath设成了空字符串，这意味着静态资源用的是相对路径，大多数情况下没问题，但如果你的项目是部署在域名的子路径下（比如https://xxx.com/my-vue-app/），就得调整两个地方：

• 把config/index.js里的assetsPublicPath改成对应子路径：

  assetsPublicPath: '/my-vue-app/',
  

• 同时在路由配置里加上base属性，和上面的路径保持一致：

  const router = new VueRouter({
    mode: 'history',
    base: '/my-vue-app/',
    routes: [...]
  })
  

3. 检查构建后的资源路径是否正确 #

执行完npm run build后，打开dist文件夹里的index.html，看看里面的静态资源引用路径是不是正确的——比如应该是static/js/app.xxx.js这种相对路径，而不是/static/js/...（因为你的assetsPublicPath是空的）。要是路径错了，资源加载失败，路由也没法正常初始化。

4. 确认托管平台的部署配置 #

别忘了检查你的托管平台是不是把dist文件夹作为根目录部署的。比如在Netlify里，要设置构建命令为npm run build，发布目录指定为dist；Surge的话，直接在终端进入dist目录执行surge .就行，别直接上传整个项目目录。

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