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

Question

我正在尝试建立一个 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 答案也很好。)

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 后有一个带有构建文件夹的客户端文件夹。我对 React 比对 Vue 更熟悉...但是逻辑应该是一样的...)