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

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

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

1. envDir

按照官方所說，vite會從環(huán)境目錄中加載我們編寫的.env.[mode]相關(guān)文件，這里默認(rèn)取的是項目根目錄，在實(shí)際開發(fā)時，我們肯定希望將配置文件放置在單獨(dú)的文件夾下，這樣可以使項目結(jié)構(gòu)更加清晰，那么如何指定vite加載環(huán)境配置的目錄呢？我們可以通過在vite.config.ts中指定envDir來告訴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",//這里使用相對路徑，絕對路徑其實(shí)也可以
  server:{
    port: 3001,
    strictPort: true
  },
  plugins: [vue(), vueJsx()]
})

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

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

# .env.local
# 所有模式下都會加載，但是會被git忽略
VITE_APP_NAME= venus
# .env.develop 測試環(huán)境參數(shù)值
VITE_OWNER=developer
VITE_POSITION=shanghai
VENUS_CONNECTION_TIMEOUT = 30000
# .env.develop.local 僅在develop模式下加載，但是會被git忽略,相同變量名時，此文件中的優(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，通過不同的指令，來啟動不同環(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識別環(huán)境變量的規(guī)則

vite并非將你寫在配置文件中的所有變量（或者說參數(shù)）都會透傳給客戶端，在我們沒有特殊配置的時候，它只會識別VITE_開頭的參數(shù)，我們可以在入口文件中打印一下：

# main.ts是我這個項目的入口文件，相關(guān)代碼會在客戶端執(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
}

可以看到只有我們寫的VITE_開頭的變量才能打印出來。

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

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

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

export default defineConfig({
  envDir: "./viteEnv",
  envPrefix: ["VITE", "VENUS"], //這個時候，我們可以將VITE_、VENUS_開頭的變量統(tǒng)統(tǒng)透傳給客戶端
  server:{
    port: 3001,
    strictPort: true
  },
  plugins: [vue(), vueJsx()]
})

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

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

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

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

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

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

上面我們看到的是vite將env中的變量透傳給客戶端的情況，然而有些參數(shù)我們可能需要在服務(wù)端用到，這個時候如何獲取呢？以vite.config.ts文件為例，這是一個配置文件，在服務(wù)端啟動時加載，相關(guān)內(nèi)容會打印到服務(wù)端的控制臺上。
vite提供了一個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ù)了，需要注意的是，我們在下面自定義的VENUS_開頭的參數(shù)并不會獲取到，如果需要，我們要在loadEnv函數(shù)參數(shù)中顯式的指定前綴：

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

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

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

NODE_ENV=production

然后我們就會發(fā)現(xiàn)，vite默認(rèn)參數(shù)中用來標(biāo)識生產(chǎn)的PROD值就會變?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
}

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

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

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

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

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

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

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

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

最新評論