Vue.js与Express.js集成问题：启动服务后页面空白

嘿，我完全懂你遇到的这个问题！我之前用Vue+Express搭项目的时候也踩过一模一样的坑，咱们一步步来解决：

你猜的没错！空白页的核心原因就是Vue的前端代码还没被打包编译——你现在直接返回的是Vue项目初始化时的原始index.html，里面只有挂载点<div id="app"></div>，但你的组件、路由、Vue实例这些核心代码还分散在src目录里，浏览器根本识别不了未编译的.vue文件和ES6+语法，自然就显示空白了。

1. 先完成Vue项目的构建 #

首先切换到你的Vue项目目录（如果是用Vue Generator生成的，通常是单独的前端目录，比如client），执行构建命令：

npm run build

这个命令会把你的Vue源码编译、压缩、打包成浏览器能直接识别的静态文件，输出到dist目录里。打开这个目录你会看到完整的index.html（已经自动注入了打包后的js、css文件引用），还有js、css、assets等文件夹。

2. 配置Express正确托管静态资源并返回构建后的index.html #

回到Express项目目录，做两个关键配置：

第一步：设置静态资源目录 #

在Express的入口文件（一般是app.js）里，添加代码把Vue构建后的dist目录设置为静态资源目录，这样Express能正确返回里面的js、css等静态文件：

const path = require('path');
// 托管Vue构建后的静态资源
app.use(express.static(path.join(__dirname, '../client/dist'))); 
// 注意：这里的路径要根据你的实际项目结构调整，确保准确指向Vue项目的dist目录

第二步：修改路由返回构建后的index.html #

把你之前的res.sendFile代码改成指向构建后的index.html，如果是单页应用（SPA），建议用通配符路由处理所有前端路由请求：

// 所有非API的请求都返回Vue的index.html，适配SPA路由
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/dist/index.html'));
});

⚠️ 重点：路径一定要写对！可以用console.log(path.join(__dirname, '../client/dist/index.html'))打印路径，确认是否指向了正确的文件位置。

3. 重启Express服务 #

执行npm start重启Express服务器，现在再刷新浏览器，应该就能正常看到你的Vue应用了！

如果是开发阶段，不想每次改代码都重新构建，可以：

• 启动Vue的开发服务器（npm run serve），同时在Vue项目的vue.config.js里配置代理，把API请求转发到Express服务器；
• 或者用concurrently这类工具，同时启动Express和Vue的开发服务，提升开发效率。

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