vite環(huán)境變量配置小結(jié)

更新時(shí)間：2023年11月22日 11:56:26 作者：可缺不可濫

Vite環(huán)境變量配置是Vite開(kāi)發(fā)環(huán)境下重要的一環(huán),它能夠根據(jù)不同的環(huán)境變量對(duì)項(xiàng)目進(jìn)行不同的配置,使得項(xiàng)目更加靈活和可維護(hù),本文就來(lái)介紹一下vite環(huán)境變量配置小結(jié),感興趣的可以了解一下

將開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境區(qū)分開(kāi)

分別創(chuàng)建三個(gè)vite 的配置文件，并將它們引入vite.config.js

vite.base.config.js

import { defineConfig } from "vite"

export default defineConfig ({})

vite.dev.config.js

import { defineConfig } from "vite"

export default defineConfig ({})

vite.prd.config.js

import { defineConfig } from "vite"

export default defineConfig ({})

引入vite.config.js

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import vitePrdConfig from "./vite.prd.config";

const EnvMap = {
  build: () => {
    return Object.assign({}, viteBaseConfig, vitePrdConfig);
  },
  serve: () => {
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
};

export default defineConfig(({ command }) => {
  console.log("command:", command);
  return EnvMap[command]();
});

在package.json中配置vite的開(kāi)發(fā)命令和打包命令

{
  "name": "vite",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "lodash": "^4.17.21",
  },
  "devDependencies": {
    "vite": "^5.0.0"
  }
}

分別執(zhí)行一下以下兩行命令

yarn dev

yarn build

可以看到，確實(shí)能夠根據(jù)command這個(gè)變量，來(lái)區(qū)分開(kāi)發(fā)還是生產(chǎn)。

在這里插入圖片描述

環(huán)境變量

會(huì)根據(jù)當(dāng)前當(dāng)前代碼所在環(huán)境而發(fā)生變化的變量。

代碼環(huán)境通常包括
開(kāi)發(fā)環(huán)境、測(cè)試環(huán)境、預(yù)發(fā)布環(huán)境、灰度環(huán)境、生產(chǎn)環(huán)境

比如百度地圖的sdk，某些第三方請(qǐng)求特定的密鑰或者token，以及小程序的APP_KEY,不同環(huán)境請(qǐng)求的后端接口地址也有可能不同。

以上這些舉例的變量，都會(huì)因?yàn)殚_(kāi)發(fā)周期的變化，用不同的變量值，這個(gè)時(shí)候，如果這些變量能夠根據(jù)環(huán)境的變化自動(dòng)變化，就比較完美，減少人工干預(yù)，才可能不出錯(cuò)。

vite處理環(huán)境變量

vite內(nèi)置第三方庫(kù)dotenv來(lái)處理環(huán)境變量的獲取和注入。

dotenv會(huì)自動(dòng)讀取.env文件，并解析這個(gè)文件的環(huán)境變量，并將其掛到process對(duì)象（nodejs的process）上。

創(chuàng)建.env文件，vite默認(rèn)在.env創(chuàng)建全局環(huán)境變量，

NAME = "dengxi"
POSITION = "CEO"

更改vite.config.js配置，這里引入了vite自帶的方法loadEnv

import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import vitePrdConfig from "./vite.prd.config";

const EnvMap = {
  build: () => {
    return Object.assign({}, viteBaseConfig, vitePrdConfig);
  },
  serve: () => {
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
};

export default defineConfig(({ command, mode }) => {
  console.log("command:", command);  
  console.log("mode:", mode) 
  const env = loadEnv(mode, process.cwd(),"");
  console.log("env:", env.NAME) 
  return EnvMap[command]();
});

無(wú)論是通過(guò)vite創(chuàng)建服務(wù)器，還是通過(guò)vite打包，我們都能獲取到。

yarn dev

yarn build

左側(cè)是vite啟動(dòng)開(kāi)發(fā)服務(wù)器，右側(cè)是vite打包到生茶環(huán)境，它們都能獲取到.env配置的環(huán)境變量

在這里插入圖片描述

loadEnv

這個(gè)方法非常重要，通過(guò)它我們可以自由配置環(huán)境變量的存儲(chǔ)文件，vite雖然提供了默認(rèn)的.env，但這顯然是不夠用的，實(shí)際項(xiàng)目中，可能會(huì)有很多環(huán)境，需要將不同的環(huán)境變量放到不同的文件中。

loadEnv接收三個(gè)參數(shù)，第一個(gè)參數(shù)來(lái)自我們的啟動(dòng)命令，如果是vite自帶的啟動(dòng)服務(wù)命令yarn vite 本文中配置的是yarn dev, mode === 'development' // true ,如果vite自帶的打包命令 yarn vite build，本文中配置的是yarn build， mode === 'production' // true

左邊是啟動(dòng)服務(wù)器，右邊是打包

在這里插入圖片描述

如果你想自由配置這個(gè)mode的值怎么辦呢？

yarn vite --mode 'test'

在這里插入圖片描述

這樣就可以通過(guò)不同的命令，來(lái)控制mode變量了。

loadEnv的第二個(gè)參數(shù)，其實(shí)是用來(lái)存放環(huán)境變量文件所在的路徑，一般這種配置文件，都是放到項(xiàng)目根目錄下的，通過(guò)process.cwd()方法，可以獲取當(dāng)前node進(jìn)程所在的位置，也就是vite.config.js文件所在的位置，而vite.config.js也在項(xiàng)目根目錄下，所以可以這么直接用。但本質(zhì)上第二個(gè)參數(shù)就是一個(gè)路徑，理論上，通過(guò)配置這第二個(gè)參數(shù)，我們能夠?qū)⒋鎯?chǔ)變量的文件放到任意路徑下。

loadEnv的第三個(gè)參數(shù)，是用來(lái)配置存儲(chǔ)環(huán)境變量文件的文件名前綴，默認(rèn)是.env，通過(guò)配置它，我們就能有多個(gè)不同環(huán)境的配置環(huán)境變量的文件了。

如果第三個(gè)參數(shù)傳入 ENV，那默認(rèn)的存儲(chǔ)全局環(huán)境變量的文件就得改名為ENV生產(chǎn)環(huán)境存儲(chǔ)環(huán)境變量的文件，就得改名為ENV.production開(kāi)發(fā)環(huán)境存儲(chǔ)環(huán)境變量的文件，就得改名為 ENV.development

創(chuàng)建 .env.development 文件，文件名稱由上文提到的loadEnv方法的第三個(gè)參數(shù) 和上文提到的 mode 組合而成，默認(rèn)開(kāi)發(fā)環(huán)境loadEnv方法的第三個(gè)參數(shù)是.env，默認(rèn)開(kāi)發(fā)環(huán)境mode是development

NAME = "yangxi"
AGE = 20

創(chuàng)建 .env.production 文件，文件名稱由上文提到的loadEnv方法的第三個(gè)參數(shù) 和上文提到的 mode 組合而成，默認(rèn)生產(chǎn)環(huán)境loadEnv方法的第三個(gè)參數(shù)是.env，默認(rèn)生產(chǎn)環(huán)境mode是production

NAME = "yangxianddengxi"
AGE = 38

再自定義一個(gè)test環(huán)境
創(chuàng)建 .env.test 文件

NAME = "firstname lastname"
AGE = "number"

此時(shí)的vite.config.js

import { defineConfig, loadEnv } from "vite";
import viteBaseConfig from "./vite.base.config.js";
import viteDevConfig from "./vite.dev.config.js";
import vitePrdConfig from "./vite.prd.config.js";

const EnvMap = {
  build: () => {
    return Object.assign({}, viteBaseConfig, vitePrdConfig);
  },
  serve: () => {
    return Object.assign({}, viteBaseConfig, viteDevConfig);
  },
};

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(),"");
  console.log("env", env.NAME); // 獲取當(dāng)前的環(huán)境變量
  return EnvMap[command]();
});

分別執(zhí)行以下命令

yarn dev // 或者yarn vite

yarn build // 或者yarn vite build

yarn dev --mode 'test' // 或者 yarn vite --mode 'test'

左邊是development ，中間是production，右邊是test

在這里插入圖片描述

env.POSITION 只有.env文件配置了，所以三個(gè)環(huán)境都能拿到，沒(méi)有被覆蓋。
env.NAME 每個(gè)環(huán)境都配置了，.env配置的變量被覆蓋了，三個(gè)環(huán)境拿到的值都不一樣。

業(yè)務(wù)代碼需要使用環(huán)境變量

上面介紹了在vite中如何配置和使用環(huán)境變量，實(shí)際開(kāi)發(fā)中，我們?cè)跇I(yè)務(wù)中，也常常要使用環(huán)境變量。

環(huán)境變量，會(huì)被vite注入到import.meta.env這個(gè)變量中

我們重新配置一下 .env 、.env.development、.env.test

.env

# 上面是服務(wù)器所需的環(huán)境變量
NAME = "dengxi"
POSITION = "CEO"

# 下面是業(yè)務(wù)中所需的環(huán)境變量，業(yè)務(wù)中的環(huán)境變量默認(rèn)必須帶有前綴VITE_,這樣的變量才會(huì)被vite注入到import.meta.env
VITE_CAN = "全棧開(kāi)發(fā)"
VITE_DO = "全棧開(kāi)發(fā)"

.env.development

# 上面是服務(wù)器所需的環(huán)境變量
NAME = "yangxi"
AGE = 20

# 下面是業(yè)務(wù)中所需的環(huán)境變量，業(yè)務(wù)中的環(huán)境變量默認(rèn)必須帶有前綴VITE_,這樣的變量才會(huì)被vite注入到import.meta.env
VITE_CAN = "前端開(kāi)發(fā)"

.env.test

# 上面是服務(wù)器所需的環(huán)境變量
NAME = "firstname lastname"
AGE = "number"

# 下面是業(yè)務(wù)中所需的環(huán)境變量，業(yè)務(wù)中的環(huán)境變量默認(rèn)必須帶有前綴VITE_,這樣的變量才會(huì)被vite注入到import.meta.env
VITE_CAN = "啥也不會(huì)"

我們?cè)趍ain.js中嘗試打印 import.meta.env

import { count } from "./counter.js";

console.log(import.meta.env)

console.log(count);

分別啟動(dòng)development環(huán)境的服務(wù)器和test環(huán)境的服務(wù)器

yarn build // 或者yarn vite build

yarn dev --mode 'test' // 或者 yarn vite --mode 'test'

在這里插入圖片描述

分別打開(kāi)瀏覽器查看

development環(huán)境

在這里插入圖片描述

test環(huán)境

在這里插入圖片描述

環(huán)境變量中，只有VITE_前綴的環(huán)境變量才被成功注入到import.meta.env中，供業(yè)務(wù)端使用
.env的全局配置變量VITE_DO也被注入了，但如果對(duì)應(yīng)的環(huán)境變量中，有同名的變量，它VITE_CAN將會(huì)被覆蓋

修改VITE_前綴

默認(rèn)強(qiáng)制加一個(gè)VITE_才能注入到業(yè)務(wù)中，也挺惡心的，但必須得有一個(gè)前綴，不然如何區(qū)分注入服務(wù)器的環(huán)境變量和業(yè)務(wù)中使用的環(huán)境變量呢

通過(guò)配置envPrefix來(lái)改變使用的前綴,一般來(lái)說(shuō)不同環(huán)境使用的環(huán)境變量名稱都是相同，不然你就得在不同的環(huán)境配置不同名稱的環(huán)境變量，而且在使用的時(shí)候也要用不同的名字，太麻煩了。所以這個(gè)envPrefix配置在vite.base.config.js即可。

vite.base.config.js

import { defineConfig } from "vite";

export default defineConfig({
  optimizeDeps: {
    exclude: [], // 將指定數(shù)組中的依賴不進(jìn)行預(yù)構(gòu)建
  },
  envPrefix: "ENV", // 更改環(huán)境變量注入到業(yè)務(wù)代碼中，所需的前綴名
});

修改完對(duì)應(yīng)的環(huán)境變量名稱后，一樣能拿到環(huán)境變量

在這里插入圖片描述