一、打包環(huán)境
1. 環(huán)境版本
| 軟件 | 版本 |
|---|---|
| nodejs | v14.17.5 |
| vue/cli | 4.5.15 |
| vue | 2.x |
2. 搭建環(huán)境
安裝nodejs
win：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-x64.msi
linux：
https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz
linux安裝流程：
wget https://nodejs.org/download/release/v14.17.5/node-v14.17.5-linux-x64.tar.xz
tar -xvf node-v14.17.5-linux-x64.tar.xz
mv node-v14.17.5-linux-x64 nodejs
ln -s /app/nodejs/bin/node /usr/local/bin/
ln -s /app/nodejs/bin/npm /usr/local/bin/
node -v
https://nodejs.org/download/release/v14.17.5/
卸載默認(rèn)vue/cli
npm uninstall -g @vue/cli
安裝vue/cli
npm install -g @vue/cli@4.5.15
二、創(chuàng)建項(xiàng)目
2.1. HBuilder X創(chuàng)建項(xiàng)目
my-project-x
修改展示文字為 gblfy.com
2.2. cli創(chuàng)建項(xiàng)目
通過cli新建一個(gè)項(xiàng)目
vue create -p dcloudio/uni-preset-vue my-project-cli
選擇默認(rèn)版本（直接敲回車鍵）
創(chuàng)建好的項(xiàng)目結(jié)構(gòu)
2.3. H5項(xiàng)目移植
把my-project-cli 項(xiàng)目src下面的文件全部刪除
把uniapp文件全選復(fù)制到my-project-cli 項(xiàng)目src下面,不需要做任何修改
2.4. 項(xiàng)目運(yùn)行
cd my-project-cli
npm run serve
2.5. 打包個(gè)性化配置
指定打包輸出路徑，這個(gè)配置不需要可以跳過
編輯my-project-cli下面的package.json
在build:h5下面新增2行配置
"build:h5_test": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_test vue-cli-service uni-build",
"build:h5_prod": "cross-env NODE_ENV=production UNI_PLATFORM=h5 UNI_OUTPUT_DIR=dist/build/h5_prod vue-cli-service uni-build",
2.6. 項(xiàng)目打包
默認(rèn)打包，執(zhí)行打包后會(huì)生成dist文件夾，dist/build/h5就是打包后的靜態(tài)文件夾，把他放到服務(wù)器上就可以
npm run build:h5
測(cè)試打包，執(zhí)行打包后會(huì)生成dist文件夾，dist/build/h5_test就是打包后的靜態(tài)文件夾，把他放到服務(wù)器上就可以
npm run build:h5_test
二者不同就是打包后的文件夾名稱，其他的都一樣
三、項(xiàng)目開發(fā)
3.1. 開發(fā)模式運(yùn)行項(xiàng)目
選擇內(nèi)置終端
3.2. 驗(yàn)證實(shí)時(shí)編譯
修改標(biāo)題內(nèi)容是否支持實(shí)施編譯
把gblfy.com改成gblfy.com 666
從上面截圖可以看出，支持實(shí)施編譯
四、異常匯總
4.1. node-sass報(bào)錯(cuò)
script中已經(jīng)提前幫我們配置好了，你需要什么環(huán)境也可以自己再配，方便快捷，看著眼前一亮。沒想到真正跑起來發(fā)現(xiàn)缺少了很多依賴包，按照提示，一個(gè)一個(gè)全部裝一遍。在這期間，大家也許會(huì)遇到一個(gè)node-sass報(bào)錯(cuò)，就像這樣：incompatible with ^4.0.0，這是因?yàn)閚ode-sass兼容問題，解決方法：文章來源：http://www.zghlxwxcb.cn/news/detail-646647.html
npm uninstall node-sass
npm install node-sass@4.14.1
重新運(yùn)行項(xiàng)目即可文章來源地址http://www.zghlxwxcb.cn/news/detail-646647.html
到了這里，關(guān)于uniApp h5項(xiàng)目/小程序項(xiàng)目通過命令行打包 一個(gè)項(xiàng)目二端適配的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
