Express+Vue生产环境直接访问子路由报错求助

问题现象 #

• 首页www.example.com可正常访问，从首页跳转至子路由也无异常
• 直接输入www.example.com/subpage时触发以下错误：

  Uncaught SyntaxError: Unexpected token '<' (at chunk-vendors.25f4b4fa.js:1:1)
  app.c661c8f0.js:1 
  Uncaught SyntaxError: Unexpected token '<' (at app.c661c8f0.js:1:1)
  manifest.json:1 
  Manifest: Line: 1, column: 1, Syntax error.
  

现有配置信息 #

项目结构 #

mainfolder
--> frontend (Vue开发源码)
    ---> dist
--> src (Express后端代码)
--> public (存放复制后的Vue构建产物)
    ---> js
    ---> css
    ---> img
    ---> index.html

Vue配置（vue.config.js） #

生产环境设置publicPath: './'，开发环境改为/则无问题。

Express配置（app.js） #

app.use(express.static('public'));
app.use('*', function(req, res, next) {
  res.sendFile(path.resolve(__dirname, '../public/index.html'));
});
app.use(require('connect-history-api-fallback')());

问题根源 #

1. publicPath路径错误：设置为./是相对路径，直接访问子路由时，静态资源的请求路径会变成www.example.com/subpage/js/chunk-vendors.xxx.js，但该路径下不存在对应资源，Express会返回index.html，导致JS文件解析时读到HTML的<符号触发语法错误。
2. 中间件顺序颠倒：connect-history-api-fallback（处理Vue history模式的中间件）应该放在静态资源托管之前，否则*路由会优先返回index.html，覆盖静态资源的正常请求处理。

解决步骤 #

1. 修正Vue的publicPath配置 #

将生产环境的publicPath改为根路径/，确保静态资源始终从域名根目录请求：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/'
}

2. 调整Express中间件顺序 #

移除多余的*路由处理，将connect-history-api-fallback放在静态资源托管之前：

const path = require('path');
const connectHistoryApiFallback = require('connect-history-api-fallback');

// 先启用history模式支持
app.use(connectHistoryApiFallback());
// 再托管静态资源
app.use(express.static(path.resolve(__dirname, '../public')));

3. 优化构建文件复制流程（可选） #

手动复制构建文件易出错，可在package.json中添加自动复制脚本：

"scripts": {
  "build:vue": "cd frontend && npm run build && cp -r dist/* ../public/",
  "deploy": "npm run build:vue && node src/app.js"
}

部署时运行npm run deploy即可自动完成Vue构建与产物复制。

验证 #

重新构建Vue项目并部署到Heroku后，验证以下场景：

• 首页正常访问
• 直接输入子路由www.example.com/subpage可正常加载
• 静态资源请求路径正确，不再返回HTML文件

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