使用ExpressJS部署VueJS 3构建文件时出现空白页问题求助

1. 先明确：npm run dev 启动 Node 不是直接诱因 #

npm run dev 只是启动 Node/Express 服务的方式，只要脚本是正确启动 Express 实例的，本身不会导致 Vue 应用空白。问题核心还是 Express 对 Vue 构建产物的配置存在疏漏。

2. 排查 Express 静态资源配置 #

Vue 构建后的 dist 文件夹是静态资源根目录，Express 必须正确指向它，且路径要匹配 Vue 的 publicPath（vue.config.js 中的配置，默认值为 /）：

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

// 关键：正确托管 dist 静态资源
app.use(express.static(path.join(__dirname, 'dist')));

如果你的 Vue 项目设置了自定义 publicPath（比如 '/my-app/'），要同步修改 Express 的静态资源挂载路径：

app.use('/my-app/', express.static(path.join(__dirname, 'dist')));

3. 处理 Vue 单页应用的路由 fallback #

Vue 是单页应用（SPA），除了静态资源请求，其他路由请求都要返回 dist/index.html，否则刷新或直接访问子路由会出现空白。Express 需要添加 fallback 路由：

// 所有非静态资源的请求都返回 index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

注意这个路由要放在所有 API 路由之后，避免覆盖你的后端接口。

4. 检查资源加载路径 #

打开浏览器开发者工具的「网络」面板，确认所有静态资源（js、css、图片等）的返回状态是 200。如果出现 404，说明 Express 的静态资源路径配置和 Vue 构建的资源路径不匹配：

• 比如 Vue 构建后资源路径是 /js/app.xxx.js，但 Express 没把 dist 设为根静态目录，就会找不到资源。
• 如果是部署在子路径下，要确保 vue.config.js 里的 publicPath 和 Express 的静态挂载路径完全一致。

5. 确认 Vue 构建产物正确 #

重新执行 npm run build，确保 dist 文件夹生成完整，没有缺失文件。有时候构建过程中可能存在缓存问题，可以先删除 dist 文件夹再重新构建。

内容的提问来源于stack exchange，提问作者Yves-Marie Ip