Vue应用部署Heroku后刷新页面出现Cannot GET /path问题咨询

这是Vue单页应用（SPA）部署到Heroku时非常常见的路由问题，核心原因在于Vue的history模式路由与服务器静态资源托管逻辑不匹配：

为什么本地正常，部署后刷新报错？ #

• 本地开发时，Webpack Dev Server默认开启了historyApiFallback: true配置——当你刷新/profile这类路由时，服务器会自动把请求 fallback 到index.html，让Vue的前端路由接管页面渲染，所以不会报错。
• 但部署到Heroku后，服务器默认只会寻找对应路径下的静态文件（比如/profile对应的profile.html），而SPA只有一个index.html，找不到对应文件就返回了Cannot GET /statement（这里大概率是笔误，应该是/profile？不过本质逻辑一致）。

解决方法（分两种场景） #

场景1：用Express等Node.js服务器托管项目 #

如果你的项目是通过Node.js服务器（比如Express）部署的，只需修改服务器代码，让所有请求都指向index.html：

1. 在项目根目录创建server.js文件，写入以下代码：

const express = require('express');
const path = require('path');
const app = express();

// 托管Vue打包后的静态资源
app.use(express.static(path.join(__dirname, 'dist')));

// 所有路由请求都返回index.html，让Vue路由处理
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// 监听Heroku分配的端口（或本地8080）
const port = process.env.PORT || 8080;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

2. 修改package.json的scripts，确保Heroku能正确构建和启动服务：

"scripts": {
  "build": "vue-cli-service build",
  "start": "node server.js"
}

场景2：用Heroku静态构建包直接托管静态文件 #

如果不需要Node.js服务器，只想直接托管Vue打包后的dist文件夹，可以创建static.json配置文件来实现fallback：

在项目根目录新建static.json，内容如下：

{
  "root": "dist",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

这个配置会告诉Heroku的静态服务器：所有路径的请求都返回index.html，让Vue的前端路由来处理页面跳转和渲染。

最后一步 #

部署前记得先本地运行npm run build生成dist文件夹，然后推送到Heroku即可。之后再刷新/profile页面，就不会出现404错误了。

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