多環(huán)境配置的實(shí)現(xiàn)方式

使用vite創(chuàng)建的項(xiàng)目，相比原來(lái)的webpack項(xiàng)目確實(shí)在性能上帶來(lái)了非常大的提升，我自己練手的一個(gè)項(xiàng)目也是使用vite+typescript+vue3來(lái)構(gòu)建的。在實(shí)際開(kāi)發(fā)場(chǎng)景中，我們很多時(shí)候會(huì)用到多環(huán)境配置，一般項(xiàng)目至少會(huì)區(qū)分dev和prod環(huán)境，然后在不同的環(huán)境下給相同參數(shù)設(shè)置一個(gè)不一樣的值。在vite中也提供了這種能力，在官方文檔中給出了一個(gè)示例：

.env                # 所有情況下都會(huì)加載
.env.local          # 所有情況下都會(huì)加載，但會(huì)被 git 忽略
.env.[mode]         # 只在指定模式下加載
.env.[mode].local   # 只在指定模式下加載，但會(huì)被 git 忽略

1. envDir

按照官方所說(shuō)，vite會(huì)從環(huán)境目錄中加載我們編寫(xiě)的.env.[mode]相關(guān)文件，這里默認(rèn)取的是項(xiàng)目根目錄，在實(shí)際開(kāi)發(fā)時(shí)，我們肯定希望將配置文件放置在單獨(dú)的文件夾下，這樣可以使項(xiàng)目結(jié)構(gòu)更加清晰，那么如何指定vite加載環(huán)境配置的目錄呢？我們可以通過(guò)在vite.config.ts中指定envDir來(lái)告訴vite多環(huán)境配置文件加載的路徑：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
  envDir: "./viteEnv",//這里使用相對(duì)路徑，絕對(duì)路徑其實(shí)也可以
  server:{
    port: 3001,
    strictPort: true
  },
  plugins: [vue(), vueJsx()]
})

為了探究各個(gè)文件加載的情況，我這里創(chuàng)建了5個(gè)文件：

viteEnv/
    |--.env.local
    |--.env.develop
    |--.env.develop.local
    |--.env.production
    |--.env.production.local

# .env.local
# 所有模式下都會(huì)加載，但是會(huì)被git忽略
VITE_APP_NAME= venus
# .env.develop 測(cè)試環(huán)境參數(shù)值
VITE_OWNER=developer
VITE_POSITION=shanghai
VENUS_CONNECTION_TIMEOUT = 30000
# .env.develop.local 僅在develop模式下加載，但是會(huì)被git忽略,相同變量名時(shí)，此文件中的優(yōu)先
VENUS_CONNECTION_TIMEOUT = 10000
# env.production 生產(chǎn)環(huán)境參數(shù)值
VITE_OWNER=production
VITE_POSITION=china
VENUS_CONNECTION_TIMEOUT = 3600

然后修改package.json，通過(guò)不同的指令，來(lái)啟動(dòng)不同環(huán)境：

  "scripts": {
    "start": "vite --mode develop",
    "start:prod": "vite --mode production",
    "build": "vue-tsc --noEmit && vite build --mode develop",
    "build:prod": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview"
  }

2. vite識(shí)別環(huán)境變量的規(guī)則

vite并非將你寫(xiě)在配置文件中的所有變量（或者說(shuō)參數(shù)）都會(huì)透?jìng)鹘o客戶端，在我們沒(méi)有特殊配置的時(shí)候，它只會(huì)識(shí)別VITE_開(kāi)頭的參數(shù)，我們可以在入口文件中打印一下：

# main.ts是我這個(gè)項(xiàng)目的入口文件，相關(guān)代碼會(huì)在客戶端執(zhí)行，在這里打印一下變量
console.log(import.meta.env)

結(jié)果如下：

{
  "VITE_OWNER": "developer",
  "VITE_POSITION": "shanghai",
  "VITE_APP_NAME": "venus",
  "BASE_URL": "/",
  "MODE": "develop",
  "DEV": true,
  "PROD": false,
  "SSR": false
}

可以看到只有我們寫(xiě)的VITE_開(kāi)頭的變量才能打印出來(lái)。

其他變量是vite默認(rèn)提供的幾個(gè)值，含義如下：

import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。
import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL。他由base 配置項(xiàng)決定。
import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境。
import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開(kāi)發(fā)環(huán)境 (永遠(yuǎn)與 import.meta.env.PROD相反)。

那么有沒(méi)有什么辦法指定我們要讀哪些參數(shù)呢，VITE_開(kāi)頭的這個(gè)規(guī)則是不是可以修改的？其實(shí)是可以的，我們?cè)趘ite.config.ts中新加入一個(gè)參數(shù)envPrefix：

export default defineConfig({
  envDir: "./viteEnv",
  envPrefix: ["VITE", "VENUS"], //這個(gè)時(shí)候，我們可以將VITE_、VENUS_開(kāi)頭的變量統(tǒng)統(tǒng)透?jìng)鹘o客戶端
  server:{
    port: 3001,
    strictPort: true
  },
  plugins: [vue(), vueJsx()]
})

3. 同樣的參數(shù)名，在.env.[mode], .env.local, .env.[mode].local中具有怎樣的優(yōu)先級(jí)順序？

我們?cè)?env.local, .env.develop.local, .env.develop中配置一個(gè)相同的參數(shù)VENUS_CONNECTION_TIMEOUT，然后在客戶端打印就會(huì)發(fā)現(xiàn)，

.env.[mode].local 這個(gè)文件中的優(yōu)先級(jí)最高

.env.[mode] 優(yōu)先級(jí)次之

.env.local 優(yōu)先級(jí)最低

4. 在服務(wù)端如何獲取到env中的變量參數(shù)

上面我們看到的是vite將env中的變量透?jìng)鹘o客戶端的情況，然而有些參數(shù)我們可能需要在服務(wù)端用到，這個(gè)時(shí)候如何獲取呢？以vite.config.ts文件為例，這是一個(gè)配置文件，在服務(wù)端啟動(dòng)時(shí)加載，相關(guān)內(nèi)容會(huì)打印到服務(wù)端的控制臺(tái)上。
vite提供了一個(gè)loadEnv函數(shù)，用于加載到相關(guān)參數(shù)

import { defineConfig,loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
//在服務(wù)端獲取配置參數(shù)
const console = require("console")
console.log(loadEnv('develop', './viteEnv'))
// https://vitejs.dev/config/
export default defineConfig({
  envDir: "./viteEnv",
  envPrefix: ["VITE", "VENUS"],
  server:{
    port: 3001,
    strictPort: true
  },
  plugins: [vue(), vueJsx()]
})

這樣就可以在服務(wù)端獲取到相關(guān)參數(shù)了，需要注意的是，我們?cè)谙旅孀远x的VENUS_開(kāi)頭的參數(shù)并不會(huì)獲取到，如果需要，我們要在loadEnv函數(shù)參數(shù)中顯式的指定前綴：

loadEnv('develop', './viteEnv', ["VITE", "VENUS"])

5. 變更為生產(chǎn)模式

這里是指在非生產(chǎn)模式下，將程序運(yùn)行模式修改為生產(chǎn)模式，官方舉了一個(gè)staging的例子，staging表示預(yù)發(fā)環(huán)境，在一些大公司，會(huì)有這樣一個(gè)環(huán)境，用做準(zhǔn)生產(chǎn)驗(yàn)證，這個(gè)環(huán)境啟動(dòng)時(shí)，我們可能希望staging應(yīng)用應(yīng)該具有類似于生產(chǎn)的行為。
只需要在.env.[mode]文件中加入一個(gè)參數(shù)：

NODE_ENV=production

然后我們就會(huì)發(fā)現(xiàn)，vite默認(rèn)參數(shù)中用來(lái)標(biāo)識(shí)生產(chǎn)的PROD值就會(huì)變?yōu)閠rue。

{
  "VITE_USER_NODE_ENV": "production",
  "VITE_OWNER": "developer",
  "VITE_POSITION": "shanghai",
  "VITE_APP_NAME": "venus",
  "VENUS_CONNECTION_TIMEOUT": "600",
  "BASE_URL": "/",
  "MODE": "develop",
  "DEV": false,
  "PROD": true, //已經(jīng)變?yōu)樯a(chǎn)環(huán)境
  "SSR": false
}

為什么會(huì)是這樣一個(gè)參數(shù)呢？看名字，這個(gè)似乎和node有關(guān)系，我們?cè)趘ite.config.ts中打印一下node的環(huán)境變量看一下：

const process = require("process")
console.log(process.env)

環(huán)境變量中確實(shí)多了一個(gè)這樣的參數(shù)。為什么會(huì)這樣呢？這個(gè)值不僅將我的環(huán)境變成了生產(chǎn)模式，這個(gè)參數(shù)還出現(xiàn)在了nodejs的環(huán)境變量中。我猜測(cè)有兩種可能：

1是NODE_ENV是個(gè)vite和nodejs都能識(shí)別的特殊參數(shù)，可以起到改變環(huán)境模式的作用。

2是vite的env中配置的NODE_開(kāi)頭的參數(shù)都會(huì)被傳遞給nodejs，用于控制nodejs的行為。

于是我又配置了一個(gè)NODE_DEMO，接著打印process.env，卻發(fā)現(xiàn)并沒(méi)有在這里出現(xiàn)。看來(lái)NODE_ENV確實(shí)是個(gè)特殊值。

這個(gè)項(xiàng)目是我自己準(zhǔn)備拿來(lái)學(xué)習(xí)vue3的練手項(xiàng)目，想看完整代碼的同學(xué)可以通過(guò)下面的地址訪問(wèn)到：
https://gitlab.com/Flnn/venus-admin

以上就是Vite多環(huán)境配置及變量識(shí)別規(guī)則的詳細(xì)內(nèi)容，更多關(guān)于Vite多環(huán)境配置變量識(shí)別的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論