最近公司有git提交uniapp项目之后自动部署h5的需求,故有了此文章。大致流程就是git提交代码后通过Webhooks触发git拉取,然后在Linux主机上编译构建,接下来就是实际操作(省略了git拉取之前的操作,默认已经将代码拉取到Linux主机了),当前的操作用户为root,以下命令默认都没有加sudo。本文使用的项目是由HBuilderX创建的,并非命令行创建
1.基本环境
主机为centos7,通过以下命令安装nodejs和cnpm,安装完成之后
curl -sL https://rpm.nodesource.com/setup_14.x | bash -
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
registry=https://registry.nlark.com
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++等)耗时比较久,如果安装过程中出现下载错误则执行以下命令
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
curl -o binding.node http://cdn.npm.taobao.org/dist/node-sass/v4.13.1/linux-x64-83_binding.node
如果出现以下错误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‘
还需要构建两个软连接
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
文件,编辑该文件,内容如下
{
"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
就出现了熟悉的内容,成功之后就可以根据下面的路径直接部署了,是不是很爽啊??
> 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前端网页托管平台,高速、免费、安全、省心,详见:
https://uniapp.dcloud.io/uniCloud/hosting
The End