在上個文章中,我們講了如何操起dva就用,但是不夠優雅,接下來,我就以自己的開發經歷,把坑都提出來,然後填上。
今天就講講怎麼切換環境吧,dev和prod,甚至uat,poc,test。
話不多說,請往下看。
我們的邏輯是,在package.json 執行任務時候,攜帶引數,在webpack配置中覆蓋roadhorgrc的預設配置,然後在執行js中拿到env變數,從而判斷環境走不同的邏輯。
上面的話不用想得太明白,看接下來的操作吧
我們使用cross-env 用來 跨平台執行設定env命令,比如在mac上和windows上的命令是不同的。
(注意:要提前安裝喲)
npm i -d corss-env
做完以上,我們在進入webpack的配置時,就可以拿到api_env
首先在根目錄下新建乙個 ".webpackrc.js
"的檔案
內容如圖
}};其他的就不多闡述了,直接說define,我們通過define定義乙個json用來作為env變數,而這裡的賦值就是拿到了package.json中配置的,可以在控制台檢視,因為我們console了。
上面2步操作完後,基本上就可以使用了,使用方法為,process.env.api_env,我用來判斷api服務的環境。
當然,你們也可以在package.json 設定成***_env
,不過記得,webpack裡面也要對應更改。
更優雅的做法,就是在webpack中 通過env,載入不同的環境配置檔名,從而達到切換環境的目的。
看了好一會的issue,才整清楚,這些東西還是要有人寫出來,才夠清晰。
env前端環境變數配置
專案有開發環境 測試環境 線上環境,裡面的介面網域名稱等是不同的。每次除錯或者打包的時候手動改動各個變數,比較麻煩,也容易出錯,所以用自動化方式直接配置的不同的環境變數。在專案根目錄下新增檔案,並配置變數 env.development 本地環境變數 node env development env...
vue專案使用 env檔案配置全域性環境變數
關於檔名 必須以如下方式命名,不要亂起名,也無需專門手動控制載入哪個檔案 env 全域性預設配置檔案,不論什麼環境都會載入合併 env.development 開發環境下的配置檔案 env.production 生產環境下的配置檔案 關於檔案內容 關於檔案的載入 根據啟動命令vue會自動載入對應的環...
Vue3 env環境變數配置使用(十一)
development production 變數名一定要以 vite 字首使用 console.log import meta.env.env檔案 env.development檔案 env.development.local檔案 main.js啟動檔案中測試 import from vue 引入...