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和逻辑代码分离，且可以回滚旧版本。

• 但不知其原理是什么，实现起来是否困难，待进一步查证。
  https://git-scm.com/book/zh/v1/Git-%E5%B7%A5%E5%85%B7-%E5%AD%90%E6%A8%A1%E5%9D%97