【uni-app】从HBuilderX到云效：构建基于Node.js与vue-cli的自动化部署流水线

1. 为什么需要从HBuilderX转向自动化部署

如果你正在使用uni-app开发跨平台应用，很可能一开始是通过HBuilderX的可视化界面创建项目的。HBuilderX确实很方便，点点鼠标就能完成项目搭建和打包。但随着项目规模扩大，特别是需要团队协作时，这种方式的局限性就显现出来了。

我去年接手的一个项目就遇到了这种情况。当时项目已经迭代了十几个版本，每次发布都需要手动在HBuilderX里点击打包按钮，然后等待编译完成。更麻烦的是，不同开发者的本地环境配置不一致，导致打包结果经常出现差异。最严重的一次，测试环境正常的功能在生产环境居然报错了，排查了半天才发现是因为打包时用的Node.js版本不同。

这时候就需要引入基于Node.js和vue-cli的工程化方案。这种方案有几个明显优势：

1. 环境一致性：通过package.json锁定依赖版本，确保所有开发者使用相同的工具链
2. 自动化能力：可以集成到CI/CD流水线，实现自动构建、测试和部署
3. 灵活配置：可以根据不同平台需求定制webpack配置
4. 版本控制友好：所有配置都是代码，可以纳入版本管理

2. 环境准备与项目迁移

2.1 Node.js版本选择

根据我的经验，Node.js版本是最容易踩坑的地方。uni-app对Node版本有一定要求，特别是涉及到node-sass等原生模块时。经过多次测试，我推荐使用以下版本组合：

• Node.js: 14.18.1 (LTS版本)
• npm: 6.14.15
• vue-cli: 4.5.15

你可以使用nvm来管理多个Node版本：

bash复制nvm install 14.18.1
nvm use 14.18.1

2.2 创建新的uni-app工程

首先全局安装vue-cli：

bash复制npm install -g @vue/cli

然后创建新项目：

bash复制vue create -p dcloudio/uni-preset-vue my-project

如果遇到网络问题无法创建，可以手动下载uni-preset-vue模板：

1. 访问GitHub上的dcloudio/uni-preset-vue仓库