最近公司有git提交uniapp项目之后自动部署h5的需求,故有了此文章。大致流程就是git提交代码后通过Webhooks触发git拉取,然后在Linux主机上编译构建,接下来就是实际操作(省略了git拉取之前的操作,默认已经将代码拉取到Linux主机了),当前的操作用户为root,以下命令默认都没有加sudo。本文使用的项目是由HBuilderX创建的,并非命令行创建

1.基本环境

主机为centos7,通过以下命令安装nodejs和cnpm,安装完成之后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
yum install -y nodejs
# 安装cnpm
npm install cnpm -g --registry=https://registry.nlark.com
# 查看cnpm信息
cnpm -v
 
cnpm@7.0.0 (/usr/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.13 (/usr/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@14.17.2 (/usr/bin/node)
npminstall@5.0.1 (/usr/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr
linux x64 5.4.72-microsoft-standard-WSL2

2.安装uniapp-cli

在windows的系统上打开HBuilderX的安装目录,然后进入plugins/uniapp-cli(我的路径是D:\Program Files\HBuilderX\plugins\uniapp-cli)目录,将该文件下的文件拷贝到Linux主机上(不需要拷贝node_modules目录和package-lock.json文件),然后在Linux上打开uniapp-cli的目录执行cnpm install,耐心等待安装完成,如有需要可以安装下less和node-sass-china,命令 cnpm install bcrypt less node-sass-china --save,其中安装node-sass-china需要编译(需要安装make,gcc,g++等)耗时比较久,如果安装过程中出现下载错误则执行以下命令

1
2
3
mkdir -p /var/tools/uniapp-cli/node_modules/_node-sass-china@4.13.1@node-sass-china/vendor/linux-x64-83
cd /var/tools/uniapp-cli/node_modules/_node-sass-china@4.13.1@node-sass-china/vendor/linux-x64-83

如果出现以下错误Binary has a problem: Error: /var/tools/uniapp-cli/node_modules/_node-sass-china@4.13.1@node-sass-china/vendor/linux-x64-83/binding.node: invalid ELF header则需要安装apt install python-snappy(ubuntu,debian)或者cnpm install bcrypt --save(centos),bcrypt 安装到uniapp-cli下,如果还是不可以,删除 node_modules 之后多尝试看看直至成功。

此时还需要注意,如果报错Syntax Error: Error: Cannot find module '/var/tools/compile-node-sass/node_modules/node-sass-china' 还需要构建两个软连接

1
2
ln -s /var/tools/uniapp-cli/ /var/tools/compile-node-sass
ln -s /var/tools/uniapp-cli/ /var/tools/compile-less

3.编写构建命令

打开项目目录,然后执行cnpm init -y生成package.json文件,编辑该文件,内容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    # 以下就是打包的命令了,UNI_PLATFORM的取值:uni-build=构建编译,uni-serve=运行
    "linux:h5": "INIT_CWD=`pwd` && cd /var/tools/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uni-build node /var/tools/uniapp-cli/bin/uniapp-cli.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4.运行编译命令

然后运行cnpm install cross-env -g && cnpm install && cnpm run linux:h5就出现了熟悉的内容,成功之后就可以根据下面的路径直接部署了,是不是很爽啊😄

1
2
3
4
5
6
7
8
9
10
11
12
> demo@1.0.0 linux:h5 /var/tools/uniapp-cli/demo
> INIT_CWD=`pwd` && cd /var/tools/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uni-build node /var/tools/uniapp-cli/bin/uniapp-cli.js
 
请注意运行模式下,因日志输出、sourcemap以及未压缩源码等原因,性能和包体积,均不及发行模式。
 
⠋  开始编译当前项目至 h5 平台...
 DONE  Compiled successfully in 26868ms                                                                      12:46:27 PM
 
 DONE  Build complete. The demo/unpackage/dist/build/h5 directory is ready to be deployed.
 
欢迎将H5站部署到uniCloud前端网页托管平台,高速、免费、安全、省心,详见: