如何创建服务于 Vue.js SPA 的 Node.js Express 应用程序？

Posted 2023-02-22

【中文标题】如何创建服务于 Vue.js SPA 的 Node.js Express 应用程序？

【英文标题】：How to create Node.js Express app serving a Vue.js SPA?

【发布时间】：2019-05-13 00:05:11

【问题描述】：

我正在尝试建立一个 Node.js 项目，该项目使用 Express 来提供一些后端 API 并提供一个使用 Vue.js 构建的 SPA。

当我使用 Vue cli 初始化项目时，我得到例如src/main.ts 主文件和命令 npm run serve 运行开发服务器并监视更改，npm run build 构建生产版本。

当我使用Express application generator 创建项目时，我得到./app.js 主文件和npm start 来启动服务器并观察变化。

如何将它们组合成一个项目，由同一个 Express 服务器提供服务？最好让单个命令监视+更新服务器和客户端的更改？我想使用 Vue 单文件组件和 TypeScript，这（可能？）需要构建步骤。

（我不需要 Vue 模板的动态服务器端渲染，只需要提供的静态 SPA 应用程序。我更喜欢 TypeScript，但 javascript 答案也很好。）

【问题讨论】：

所以你想要一个同时启动服务器和客户端的命令？

单个命令应该启动托管客户端的服务器。但是应该注意对两者的更改并自动重新编译。

【参考方案1】：

这些对于您的开发和生产环境会有所不同...

对于开发，请查看concurrently - 它基本上允许您在 package.json 中创建一个脚本来同时启动客户端和服务器，并监视更改等...

对于生产，您的 app.js 中需要这样的内容：

if (process.env.NODE_ENV === 'production') 
  app.use(express.static('client/build'));

  const path = require('path');
  app.get('*', (req, res) => 
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  );

(上面的代码假设你的目录结构在运行npm run build之后有一个带有构建文件夹的客户端文件夹我更熟悉React而不是Vue......但逻辑应该是相同的...... .)