Question

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

使用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的了解还多...但是逻辑应该相同... ）

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

1 个答案: