Vue.js项目部署Vercel后vue-router动态路由404问题解决方法

问题根源在于你使用了Vue Router的history模式，Vercel作为静态托管服务，当直接访问/certificate/public/43这类路径时，会尝试在服务器上寻找对应的物理文件，而这类前端路由路径并没有对应的静态文件，因此返回404。本地开发时，Vue的dev server会自动处理路由转发，所以不会有问题。

解决步骤：

• 在项目根目录创建vercel.json配置文件
• 写入以下重写规则，让所有请求都转发到index.html，由Vue Router接管路由处理：

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

将修改后的代码重新部署到Vercel，之后访问/certificate/public/43这类路径就能正常进入目标路由了。

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