快捷導(dǎo)航

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

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

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

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

分別創(chuàng)建三個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的開發(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這個變量，來區(qū)分開發(fā)還是生產(chǎn)。

在這里插入圖片描述

環(huán)境變量

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

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

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

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

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

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

dotenv會自動讀取.env文件，并解析這個文件的環(huán)境變量，并將其掛到process對象（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]();
});

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

yarn dev

yarn build

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

在這里插入圖片描述

loadEnv

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

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

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

在這里插入圖片描述

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

yarn vite --mode 'test'

在這里插入圖片描述

這樣就可以通過不同的命令，來控制mode變量了。

loadEnv的第二個參數(shù)，其實(shí)是用來存放環(huán)境變量文件所在的路徑，一般這種配置文件，都是放到項(xiàng)目根目錄下的，通過process.cwd()方法，可以獲取當(dāng)前node進(jìn)程所在的位置，也就是vite.config.js文件所在的位置，而vite.config.js也在項(xiàng)目根目錄下，所以可以這么直接用。但本質(zhì)上第二個參數(shù)就是一個路徑，理論上，通過配置這第二個參數(shù)，我們能夠?qū)⒋鎯ψ兞康奈募诺饺我饴窂较隆?/p>

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

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

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

NAME = "yangxi"
AGE = 20

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

NAME = "yangxianddengxi"
AGE = 38

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

NAME = "firstname lastname"
AGE = "number"

此時的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文件配置了，所以三個環(huán)境都能拿到，沒有被覆蓋。
env.NAME 每個環(huán)境都配置了，.env配置的變量被覆蓋了，三個環(huán)境拿到的值都不一樣。

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

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

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

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

.env

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

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

.env.development

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

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

.env.test

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

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

我們在main.js中嘗試打印 import.meta.env

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

console.log(import.meta.env)

console.log(count);

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

yarn build // 或者yarn vite build

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

在這里插入圖片描述

分別打開瀏覽器查看

development環(huán)境

在這里插入圖片描述

test環(huán)境

在這里插入圖片描述

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

修改VITE_前綴

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

通過配置envPrefix來改變使用的前綴,一般來說不同環(huán)境使用的環(huán)境變量名稱都是相同，不然你就得在不同的環(huán)境配置不同名稱的環(huán)境變量，而且在使用的時候也要用不同的名字，太麻煩了。所以這個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ù)代碼中，所需的前綴名
});

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

在這里插入圖片描述