uni-app多環(huán)境配置實現(xiàn)自動部署的方式詳解
前言
uni-app 項目在不同階段需要部署到不同的環(huán)境，比如開發(fā)環(huán)境（dev）、測試環(huán)境（test）、UAT 環(huán)境（uat）、生產(chǎn)環(huán)境（prod）等，那么如何通過自動化構(gòu)建工具實現(xiàn)在多環(huán)境下自動部署呢？我們先來看看不同打包方式下的環(huán)境配置。
一、uni-app 不同打包方式下的環(huán)境配置
uni-app 可通過 HBuilderX 方式和基于 vue-cli 命令行方式進行打包，兩種方式下進行打包的開發(fā)環(huán)境和生產(chǎn)環(huán)境是不同的。
1.HBuilderX 方式
uni-app 可通過 process.env.NODE_ENV 判斷當前環(huán)境是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。一般用于連接測試服務(wù)器或生產(chǎn)服務(wù)器的動態(tài)切換。
在HBuilderX 中，點擊 “運行” 編譯出來的代碼是開發(fā)環(huán)境，點擊 “發(fā)行” 編譯出來的代碼是生產(chǎn)環(huán)境。
2.基于 vue-cli 命令行方式
使用基于 vue-cli 命令行方式創(chuàng)建項目可通過添加必要的環(huán)境變量和判斷實現(xiàn)多環(huán)境配置，然后在編譯時帶上環(huán)境參數(shù)即可。
二、配置多環(huán)境實現(xiàn)自動部署
由以上分析可知，我們需要通過基于 vue-cli 命令行方式來實現(xiàn)自動化部署。
1.編寫 js 文件，對環(huán)境進行判斷
// 開發(fā)環(huán)境
const dev = {
common: "http://192.168.xx.xx:2000",
store:"http://192.168.xx.xx:2001",
buyer: "http://192.168.xx.xx:2002"
};
// UAT環(huán)境
const uat = {
common: "http://124.xx.xx.xx:2000",
store:"http://124.xx.xx.xx:2001",
buyer: "http://124.xx.xx.xx:2002"
};
// 生產(chǎn)環(huán)境
const prod = {
common: "http://128.xx.xx.xx:2000",
store:"http://128.xx.xx.xx:2001",
buyer: "http://128.xx.xx.xx:2002"
};
//默認生產(chǎn)環(huán)境
let api = dev;
//如果是開發(fā)環(huán)境
if (process.env.NODE_ENV == "development") {
api = dev;
} else if (process.env.NODE_ENV == "uat") {
api = uat;
} else {
api = prod;
}
2.修改 package.json 文件
{
"name": "shop-uniapp",
"version": "1.0.0",
"description": "#####開源不易，如有幫助請點Star",
"main": "main.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build:h5-dev": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=development node /usr/local/uniapp-cli/bin/uniapp-cli.js",
"build:h5-uat": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=uat node /usr/local/uniapp-cli/bin/uniapp-cli.js",
"build:h5-prod": "INIT_CWD=`pwd` && cd /usr/local/uniapp-cli && cross-env UNI_INPUT_DIR=$INIT_CWD/ UNI_OUTPUT_DIR=$INIT_CWD/unpackage/dist/build/h5 UNI_PLATFORM=h5 NODE_ENV=prod node /usr/local/uniapp-cli/bin/uniapp-cli.js"
},
"repository": {
"type": "git",
"url": "http://xxx/shop-uniapp.git"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3.打包
npm install cross-env -g && npm install && npm run build:h5-uat
總結(jié)
到此這篇關(guān)于uni-app多環(huán)境配置實現(xiàn)自動部署的文章就介紹到這了,更多相關(guān)uni-app多環(huán)境配置自動部署內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章是對瀑布流局部的實現(xiàn)進行了詳細的分析介紹。需要的朋友參考下2013-05-05
這篇文章主要介紹了前端小知識之??=?操作符更簡潔的默認值處理方式的相關(guān)資料,??=操作符是JavaScript中用于設(shè)置默認值的新操作符,它僅在變量值為null或undefined時才賦值,需要的朋友可以參考下2024-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)點擊生成隨機div，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
《javascript設(shè)計模式》學(xué)習(xí)筆記五：Javascript面向?qū)ο蟪绦蛟O(shè)計工廠模式實例分析
這篇文章主要介紹了Javascript面向?qū)ο蟪绦蛟O(shè)計工廠模式,結(jié)合實例形式分析了《javascript設(shè)計模式》中Javascript面向?qū)ο蠊S模式相關(guān)概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
這篇文章主要給大家介紹了關(guān)于微信小程序請求前置的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
為原生js Array增加each方法，通過prototype來增加功能，進行擴展2012-04-04
這篇文章主要介紹了京東優(yōu)選小程序的實現(xiàn)代碼示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02
這篇文章主要介紹了60行js代碼實現(xiàn)俄羅斯方塊，可能會有些小bug，不過總體上還是比較不錯的。大伙來研究下代碼，給出意見。2015-03-03
這篇文章主要介紹了js實現(xiàn)定時進度條,進度100%以后可以切換圖片，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
javascript 自動標記來自搜索結(jié)果頁的關(guān)鍵字
使用javascript自動標記來自搜索結(jié)果頁的關(guān)鍵字的實現(xiàn)代碼。2010-01-01