最近公司有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