uni-app的多環(huán)境部署配置

記錄下如何對(duì)uni-app項(xiàng)目進(jìn)行多環(huán)境打包部署改造

環(huán)境區(qū)分

官方文檔說明：

開發(fā)環(huán)境和生產(chǎn)環(huán)境

uni-app 可通過 process.env.NODE_ENV 判斷當(dāng)前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。一般用于連接測(cè)試服務(wù)器或生產(chǎn)服務(wù)器的動(dòng)態(tài)切換。

在HBuilderX 中，點(diǎn)擊“運(yùn)行”編譯出來的代碼是開發(fā)環(huán)境，點(diǎn)擊“發(fā)行”編譯出來的代碼是生產(chǎn)環(huán)境

解決方案

使用基于vue-cli命令行方式創(chuàng)建項(xiàng)目(可選擇將舊項(xiàng)目改造為支持命令行的方式)

添加必要的環(huán)境變量， VUE_APP_ 起始，例如 VUE_APP_BASE_API

即在項(xiàng)目根目錄新建不同環(huán)境的變量配置文件，并分別寫入環(huán)境所需配置

.env.development

.env.test

.env.production

然后可以通過 VUE_APP_BASE_API 訪問

例如：在項(xiàng)目?jī)?nèi)請(qǐng)求接口的地方設(shè)置 baseurl 為 process.env.VUE_APP_BASE_API

修改 package.json

增加以下腳本，在啟動(dòng)或者打包時(shí)以切換不同服務(wù)器(不一定完全按照下方設(shè)置)。

這里的需求是在開發(fā)模式啟動(dòng)時(shí)方便切換開發(fā)、測(cè)試、生產(chǎn)環(huán)境的數(shù)據(jù)庫方便驗(yàn)證問題，以及發(fā)行至各環(huán)境

"build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build", "build:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-build", "build:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-build", "dev:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-serve --watch", "dev:h5-test": "cross-env NODE_ENV=test UNI_PLATFORM=h5 vue-cli-service uni-serve --watch", "dev:h5-dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve --watch",

最后像普通vue項(xiàng)目一樣使用就行了

npm run dev:h5-test

參考資料

uni-app如何多環(huán)境配置部署，使用npm的方式(https://ask.dcloud.net.cn/question/73096)

開發(fā)環(huán)境和生產(chǎn)環(huán)境(https://uniapp.dcloud.io/frame?id=%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83%E5%92%8C%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83)

命令行打包(http://xuedingmiao.com/blog/jnpf_app_cli.html)

移動(dòng)APP

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。