如何创建一个使用Node.js Express搭建的，提供Vue.js单页应用程序的应用？

Question

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

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

当我使用 Express 应用程序生成器 创建项目时，我会得到 ./app.js 主文件和 npm start 来启动服务器并监视更改。

如何将这些组合成一个单一的项目，并由同一 Express 服务器提供服务？最好是一个命令可以同时观察+更新服务器和客户端的更改。我想使用 Vue 单文件组件和 TypeScript，这可能需要构建步骤。

（我不需要 Vue 模板的动态服务器端渲染，只需要静态的 SPA 应用程序即可。我更喜欢 TypeScript，但 JavaScript 的答案也可以。）

- Sampo

---

你想要一个单一的命令来启动服务器和客户端吗？ - SakoBu

单个命令应该启动服务器，托管客户端。但是对两者的更改应该被监视并自动重新编译。 - Sampo

Answer 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后有一个名为build的client文件夹。我对React比Vue更熟悉...但逻辑应该是相同的...)

- SakoBu