Vue項目如何根據(jù)不同運(yùn)行環(huán)境打包項目
場景
在開發(fā)過程中，通常會遇到這樣的問題：
在開發(fā)環(huán)境、測試環(huán)境和生產(chǎn)環(huán)境中我們會用到不一樣的服務(wù)接口
在生產(chǎn)環(huán)境出現(xiàn)了出現(xiàn)了某個bug，但是在測試環(huán)境不存在，這時候就需要開發(fā)環(huán)境訪問生產(chǎn)環(huán)境的接口
多端一體的項目模式
這些情況都要手動去切換接口地址，這樣會很麻煩，有時還可能出現(xiàn)操作失誤。
這時候就需要用到cross-env進(jìn)行分環(huán)境配置了，根據(jù)不同的環(huán)境，我們使用對應(yīng)的接口，這樣也就不用手動去操作。
第一步 安裝依賴 cross-env
使用 cross-env 解決跨平臺問題。
在終端運(yùn)行：
npm install cross-env --save-dev // 安裝 cross-env 依賴
第二步 修改 package.json 文件
在 package.json 中 scripts 屬性中 build 命令替換為：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"build:test": "cross-env vue-cli-service build --mode test",
"build:prod": "cross-env vue-cli-service build --mode production",
},當(dāng)我們需要配置多個環(huán)境變量時，未避免package.json命令過長，這時候就可以選擇模式配置
默認(rèn)模式
vue-cli項目下默認(rèn)有三種模式：
development模式：在 vue-cli-service serve 時使用。production模式：在 vue-cli-service build 和 vue-cli-service test:e2e 時使用。test模式：在 vue-cli-service test:unit 時使用。
每個模式都會將 NODE_ENV設(shè)置為模式的名稱，比如在development模式下，NODE_ENV為 ‘development’。
自定義模式
自定義模式需要通過.env文件進(jìn)行配置，.env文件分為以下類型：
.env，在所有的環(huán)境中被載入.env.local，在所有的環(huán)境中被載入，但會被 git 忽略.env.[mode]，只在指定的模式中被載入.env.[mode].local，只在指定的模式中被載入，但會被 git 忽略[mode]是自定義的模式名稱
例：通過在package.json腳本中增加 --mode [mode]來指定模式。
// package.json
{
"scripts": {
"build:testing": "cross-env vue-cli-service build --mode testing",
}
}第三步 創(chuàng)建不同環(huán)境的文件
在項目根目錄新建 .env.development文件：
// 開發(fā)環(huán)境模式 // 環(huán)境變量 NODE_ENV=development // 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中 VUE_APP_ENV = 'development'
在項目根目錄新建 .env.test文件：
// 測試環(huán)境模式 // 環(huán)境變量（這里的環(huán)境變量是跟打包有關(guān)的，production則會進(jìn)行壓縮代碼等，真正跟每個環(huán)境有關(guān)的變量是下面以VUE_APP開頭的變量） NODE_ENV=test // 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中 VUE_APP_ENV = 'test'
在項目根目錄新建 .env.production文件：
// 線上環(huán)境模式 // 環(huán)境變量 NODE_ENV=production // 以 VUE_APP_ 開頭的變量會被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中 VUE_APP_ENV = 'production'
第四步 根據(jù)配置進(jìn)行判斷使用不同的環(huán)境服務(wù)
let baseUrl = '';
let env = process.env;
if (env.VUE_APP_ENV === 'development') {
baseUrl = `http://xxx/`; // 本地服務(wù)地址
} else if(env.VUE_APP_ENV === 'production'){
baseUrl = `http://xxx/`; // 正式環(huán)境服務(wù)地址
}else if(env.VUE_APP_ENV === 'test'){
baseUrl = `http://xxx/`; // 測試環(huán)境服務(wù)地址
}
export {
baseUrl,
env
}第五步 打包項目
// 測試環(huán)境打包項目 npm run build:test // 生產(chǎn)環(huán)境打包項目 npm run build:prod
結(jié)果測試：
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
在項目開發(fā)中,有兩個功能特別類似,如果單獨(dú)實(shí)現(xiàn),會有很多重復(fù)的代碼，這時候就會用到邏輯復(fù)用，本文主要介紹了vue3?邏輯復(fù)用的實(shí)現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下2024-02-02
本篇文章主要介紹了使用vue-cli編寫vue插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定
這篇文章主要為大家詳細(xì)介紹了vue.js利用Object.defineProperty實(shí)現(xiàn)雙向綁定，幫大家解析神秘的Object.defineProperty方法2017-03-03
Vue2 Vue-cli中使用Typescript的配置詳解
Vue作為前端三大框架之一截至到目前在github上以收獲44,873顆星，足以說明其以悄然成為主流。下面這篇文章主要給大家介紹了關(guān)于Vue2 Vue-cli中使用Typescript的配置的相關(guān)資料，需要的朋友可以參考下。2017-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時圖形驗證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了Vue中如何設(shè)置全局的cookie對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要為大家介紹了vue虛擬滾動性能優(yōu)化方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹vue3中?provide?和?inject?用法及原理，provide?和?inject可以?解決多次組件傳遞數(shù)據(jù)的問題，下面文章是具體的用法和實(shí)現(xiàn)原理,具有一定的參考價值，需要的朋友可以參考一下，希望對大家有所幫助2021-11-11