18｜一体化：前端和后端一定要项目分开吗?
叶剑峰
该思维导图由 AI 生成，仅供参考
你好，我是轩脉刃。
从这节课开始，我们一起进入了实战第三关。如果说实战第一关怎么从零开始搭建框架是研究如何种栽一株盆栽，实战第二关框架核心的优化，是搭建了盆栽的枝叶，让盆栽可以健康生长，那么实战第三关就是为盆栽增加花叶，之后每一节课讨论和实现的功能都能为框架增色不少。
下面让我们开始第三关的第一节课框架一体化吧。
前后端一体化的架构方案
在前后端分离流行的现在，我们已经习惯了前端一个 Vue 项目 + 后端一个 Web 接口项目的组合。这样的组合对于大项目来说，非常符合社会分工的原则，前端由一个人或者一个部门来负责，后端由另外一个人或者一个部门来负责。
不过作为后端工程师，你一定遇到过要研发一个简单页面的需求。比如一个开发使用的运营后台或者一个简单的工具页面。这个时候如果一个人开发两个项目，你应该会有在两个项目中频繁切换疲于奔命的感觉。所以如果一个框架能同时支持前端开发，又支持后端接口开发，且两者能完美融合一起，那该多好啊。这也是我最开始萌生的想法。
那我们先来思考下，是否可以把这个在一个项目中前后端一体化的设想，设计到真实架构层面的修改中？
在架构层面，前后端分离的架构经常是，Nginx 作为网关，前端页面作为 Nginx 的一个 location 路由，而后端接口作为 Nginx 的另外一个 location 路由。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了如何将前端Vue项目集成到后端框架中，实现前后端一体化的架构。作者首先讨论了前后端分离架构的优缺点，以及在某些场景下前后端一体化的需求。随后，详细介绍了如何将Vue项目集成到业务代码中，并确定了编译结果文件夹。通过使用Vue自带的构建工具和相关命令，作者展示了如何将Vue项目的文件复制到框架根目录下，并进行编译操作，最终生成需要代理的静态文件目录。文章还讨论了如何实现前后端一体化的架构，以及在实际操作中的具体步骤和注意事项。在改造过程中，还介绍了如何优化编译命令，将前后端编译命令统一封装成方便使用的命令。总的来说，本文涉及技术细节，适合对前后端开发有一定了解的读者阅读。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《手把手带你写一个 Web 框架》，新⼈⾸单¥59
《手把手带你写一个 Web 框架》，新⼈⾸单¥59
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(5)
- 最新
- 精选
- Geek_d2bfc2之前搞过dotnet集成vue项目，开发的时候用npm run dev单起vue项目的时间比较多，因为这样改前端逻辑、表现反应比较快，实际部署的时候还是用了dotnet启动配置前后端路由隔离的方法，跟文章一样。
作者回复: 殊途同归
2021-12-14 
宙斯go代码和前端代码混在同一目录层级下，感觉不容易区分，是否可以考虑把前段代码降到一个层级呢作者回复: 之前尝试过，frontend目录和backend目录，但是其实我希望后续希望能规划一个命令，自动生成前后端的页面+接口，所以前后端的目录如果区分太开，整体给人的感受就是分割的。如果坚持这样的混用目录，后续会有很多倾向做“前后端”协同的工具和服务。所以做了这种选择。
2021-11-23
党不明白这么搞有啥意义 gin自身就有个static函数直接定义静态文件夹 用gin的静态文件能力去拉取vue编译后的html 跟分开开发没有任何的不一样 每次vue编译后再看成品 这种开发模式本来就很反vue的 vue尤其是vue3的vite 开发环境不是更香么2022-06-0714- 宙斯回答：获取参数并放在args变量里面，然后通过exec.Command("npm", ...args)可以完整获取执行参数2021-11-021
- Geek1705牛蒡，我见过的一个项目也是这么做的，整一个Makefile.2021-10-29
收起评论
