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 判斷當(dāng)前環(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)文章
這篇文章主要介紹了JavaScript框架(iframe)操作,介紹了種情況下的操作方法,需要的朋友可以參考下2014-04-04
這篇文章主要為大家詳細介紹了countUp.js實現(xiàn)數(shù)字滾動效果,文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
這篇文章主要介紹了Swiper.js插件超簡單實現(xiàn)輪播圖，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家介紹了JavaScript操作元素，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
QQ郵箱的一個文本編輯器代碼...2007-03-03
這篇文章主要介紹了JavaScript事件委托技術(shù),實例分析了事件委托技術(shù)的原理、適用場合及用法實例,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了Flexible.js可伸縮布局實現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-11-11
這篇文章主要介紹了百度小程序自定義通用toast組件,百度小程序的toast僅支持在頁中展示，不能自定義位置、字體大小、在單個文本中增加icon等需求；因此自定義一個全局可通用的Toast,需要的朋友可以參考下2019-07-07
20170918 前端開發(fā)周報之JS前端開發(fā)必看
本文給大家分享了最新版js 前端開發(fā)周報，內(nèi)容非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-09-09
JavaScript使用箭頭函數(shù)實現(xiàn)優(yōu)化代碼
在JavaScript的編程世界里,我們時常被普通函數(shù)的冗長寫法所困擾,每次都需要寫function關(guān)鍵字,有時候還要明確地寫return語句,下面我們就來看看如何利用箭頭函數(shù)優(yōu)化這些繁瑣的代碼吧2023-11-11