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

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的答案也很好。(

Answer 1

对于您的开发和生产环境，这些将有所不同。。。

对于并发开发，它基本上允许您在包.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更熟悉…但逻辑应该是一样的…(