将VueJS前端与Express REST后端相结合？

Question

我是Vue和Node的新手,我正在试图弄清楚如何构建我的项目.

一方面,我有一个基于vue init webpack myproject的前端,而另一方面,我有一个基于Express + MongoDB的REST API.Vue项目使用REST API进行所有数据处理等.目前我已将这两个分成两个独立的Git存储库.发展方面这对我来说很有意义,因为前端和后端无论如何都应该是松散耦合的.

但是,当涉及到测试和生产的部署时,我还没有一个好的工作流程.我的计划是在同一个网络服务器上托管前端和后端.通过在前端项目上执行'npm run build',然后手动将生成的文件复制到后端项目中的\ static文件夹,最后使用'npm run start'启动后端服务器,完成初始部署.

这感觉不太好,我确信有更好的方法来部署前端和后端.

有关如何改进部署过程的任何想法或提示？

Answer 1

如果您使用webpack构建vue项目,则应该能够设置build/dist文件夹,以便存储捆绑的应用程序文件.

然后在您的快速应用程序中,您可以配置一个"端点"来提供可能指向您的build/dist文件夹的静态文件.

然后,当您为应用程序提供服务时,索引应该获取此文件.

在指导您完成创建dev和prod构建的过程时,webpack doc已经做得很好

https://webpack.js.org/guides/getting-started/

我建议你从上到下阅读它,因为它有一堆有用的信息,可以节省你的时间

并设置快递指向您的dis文件夹,你可以做这样的事情:

app.use('/static', express.static(path.join(__dirname, 'dist')))

并从您的索引中调用该文件.

<script src="/static/bundle.js"></script>

如果这是您正在寻找的答案,请告诉我.