vue编译的dist如何部署到远程服务器

使用vue环境开发完成后，需要编译成静态文件，并部署到服务器上，方案探讨

  • 禁止npm run dev 在线上运行，非常不稳定，这仅是开发模式
  • 使用npm run build，编译生成静态文件dist，服务器配置nginx 来访问dist下的静态文件
  • 以下是几种dist部署的方案，以及优缺点分析

1、线上服务器编译

git仓库仅放逻辑代码，提交到git仓库后，服务器拉取，并build编译生成dist文件目录。

  • 优点：dist不需要占用git仓库的大小，单服务器环境配置一致，方便快捷
  • 缺点：线上服务器编译有风险，多服务器不能保证编译环境一致，且出了问题不好回滚

2、本地环境编译

git仓库存储逻辑代码和编译后的dist静态文件，一起提交到git仓库，服务器拉取即可

  • 优点：编译环境和测试环境一致，多服务器也能保证代码一致，有问题可通过git仓库回滚代码
  • 缺点：占用git仓库的大小，本质想把dist和逻辑代码分开，多人开发的话，不能保证每个人的编辑环境都一直

3、单独服务器自动部署上线 (目前使用)

git仓库存储逻辑代码和编译后的dist静态文件，开发完后，仅提交逻辑代码，使用gitlab CI/CD在单独服务器上进行编译dist和上线

  • 优点：即使多人多服务器，编译环境也完全一致，可随时回滚代码版本，持续集成和部署很方便
  • 缺点：占用git仓库的大小，本质想把dist和逻辑代码分开

4、理想方法（待实现）

类似微信小程序，本地逻辑层有自己的代码仓库，编译提交可以标记dist版本，并上传到服务器，实现dist和逻辑代码分离，且可以回滚旧版本。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

友情链接更多精彩内容