Vite多環(huán)境配置項目高定制化能力詳解

更新時間：2022年07月04日 14:32:30 作者：南山種子外賣跑手

這篇文章主要為大家介紹了Vite多環(huán)境配置項目高定制化能力詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

業(yè)務背景

近些年來，隨著前端工程架構(gòu)發(fā)展，使得前端項目中也能擁有如后端工程的模塊能力。正所謂 “能力（越）越大（來），責任（越）越大（卷）”，現(xiàn)在的前端工程不僅僅要滿足業(yè)務需求，還伴隨更多復雜的環(huán)境適配問題，例如：

api請求的域名會根據(jù)不同環(huán)境而不同；
線上環(huán)境和測試環(huán)境在打包策略有所不同「如線上要隔離sourceMap、屏蔽vue|react devtools等...」；
前端spa組件根據(jù)不同環(huán)境做出不同邏輯；

老板恨不得把所有應用端都收歸到一個項目里面，什么微前端、uniapp多端方案接踵而至。。。但無論是什么方案，都離不開一個核心點：環(huán)境變量和多環(huán)境適配。那么，今天我們就來聊下如何在Vite中實現(xiàn)一套拓展能力強的多環(huán)境適配方案。

多環(huán)境場景的業(yè)務形態(tài)

我們先來了解，在多環(huán)境下要求前端工程架構(gòu)流程是怎樣的？

如上圖所示，在工程啟動 / 構(gòu)建時：

環(huán)境變量注入：一般通過命令參數(shù)模式，可在package.json里配置；
多模式文件：Vite根據(jù)環(huán)境變量來讀取配置文件，把文件參數(shù)抽取出來做特性區(qū)分，這塊也稱為Vite的環(huán)境模式；
環(huán)境收集器：簡單理解為1個函數(shù)，做的事情就是把第二步的特性參數(shù)歸整到一處并做些特定的邏輯，之后通過插件生成客戶端的最終參數(shù)并吐出；
客戶端環(huán)境差異定制化：客戶端（也就是工程里面的.vue、.ts、.tsx等前端文件）獲取到環(huán)境參數(shù)做一些特定區(qū)分邏輯；
構(gòu)建和發(fā)布：之后就是項目根據(jù)以上幾步產(chǎn)出的環(huán)境特性文件來打包，最終推送到服務端完成整個前端工程的生產(chǎn)。

以上是大體流程，接下來會每步細分給大家講解如何實現(xiàn)。方便大家理解，本次筆者專門開了個新GitHub項目來存放本文所有實現(xiàn)代碼，有興趣的同學可以拿下來實操下????。

Vite多環(huán)境方案實現(xiàn)

多模式文件配置

自定義環(huán)境變量

Vite通過多模式來配置不同啟動場景下的特性環(huán)境變量，你可以創(chuàng)建自定義的模式文件，如下：

這個項目創(chuàng)建了4種模式分別兼容release、beta、測試、本地環(huán)境，每種模式下有自己特定的環(huán)境變量，例如.env.local的內(nèi)如如下：

# .env._local
# 透傳客戶端參數(shù)
VITE_NODE_ENV=local
VITE_OWNER=Tom
VITE_POSITION=廣州，天河
# 私有參數(shù)，僅在vite server獲取到，
# 假如你的項目包含此類敏感變量。應該將文件添加到你的 .gitignore 中，以避免它們被 git 檢入。
MODE_KEY=PRIVATE_KEY_LOCAL

根據(jù)Vite的約定規(guī)則，只有以“VITE_”開頭的變量才會在客戶端被捕獲，捕獲方式為：import.meta.env.{參數(shù)名}。

至于非“VITE_”開頭的變量屬于私有屬性，不會傳遞出去。假如你的項目包含此類敏感變量。應該將文件添加到你的 .gitignore 中，以避免它們被 git 檢入。

完成上述配置后，我們只需要在package.json增加對應的啟動命令就可以讓Vite獲取哪個模式來運行項目了：

{
  "name": "vite-mul-env-learn",
  "version": "0.0.0",
  "scripts": {
    "dev:local": "vite --mode _local",
    "dev:test": "vite --mode test",
    "build:beta": "vite build --mode beta",
    "build:release": "vite build --mode release",
    "lint": "eslint --fix --ext .js,.vue,ts src"
  }
}

Vite默認環(huán)境變量

Vite 在一個特殊的 import.meta.env 對象上暴露環(huán)境變量。這里有一些在所有情況下都可以使用的內(nèi)建變量：

import.meta.env.MODE: {string} 應用運行的模式。

import.meta.env.BASE_URL: {string} 部署應用時的基本 URL。他由base 配置項決定。

import.meta.env.PROD: {boolean} 應用是否運行在生產(chǎn)環(huán)境。

import.meta.env.DEV: {boolean} 應用是否運行在開發(fā)環(huán)境 (永遠與 import.meta.env.PROD相反)。

import.meta.env.SSR: {boolean} 應用是否運行在服務器渲染環(huán)境。

這里補充說明下，DEV 和 PROD分別對應package.json中啟動dev和build命令決定的，而SSR則是對應了Vite啟動時設(shè)定的middlewareMode變量決定的：

const { createServer: createViteServer } = require('vite')
const vite = await createViteServer({
    server: { middlewareMode: 'ssr' }
  })

通過插件透傳環(huán)境變量

很多情況下，我們的環(huán)境變量不僅僅是簡單的字符串，而是通過vite服務中二次計算才能得到最終結(jié)果，有點類似Vue中computed或React中useMemo、useCallback的效果。像這類非靜態(tài)的環(huán)境變量，我們需要借助插件能力來讓它們也能夠返回客戶端，插件很多，這里推薦vite-plugin-environment，使用大概是這樣子的：

You can provide a list of environment variable names to expose to your client code:

import { defineConfig } from 'vite'
import EnvironmentPlugin from 'vite-plugin-environment'
export default defineConfig({
  plugins: [
    EnvironmentPlugin(['API_KEY', 'DEBUG']),
  ],
})

And then use them as:

const apiKey = process.env.API_KEY

在這個基礎(chǔ)上，我們還能配合模式文件進行聯(lián)合判斷：

import { defineConfig, ConfigEnv, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
import EnvironmentPlugin from 'vite-plugin-environment';
import { fetchEnv } from './server/envUitls';
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }: ConfigEnv) => {
  const env = loadEnv(mode, __dirname);
  const { proxy } = fetchEnv(env.VITE_NODE_ENV); // 設(shè)置域名和端口
  return {
    base: './',
    plugins: [
      vue(),
      EnvironmentPlugin({
        PROXY: proxy
      })
    ]
  };
});

const env = loadEnv(mode, __dirname);

可以獲取.env._local是所有非私密參數(shù)，接下來程序可以根據(jù)模式參數(shù)來計算最終的環(huán)境變量，通過插件返回到客戶端。

fetchEnv方法可以理解成環(huán)境收集器，里面可以寫邏輯讓環(huán)境參數(shù)得到統(tǒng)一整合。

客戶端環(huán)境差異定制

這塊就很好理解了，無非就是通過指定方法獲取環(huán)境變量，來條件渲染vue或React組件。

下面做了個demo：

<script setup lang="ts">
import { ref } from 'vue';
import { proxy } from '@/api/proxy';
interface IEnv extends ImportMetaEnv {
  VITE_NODE_ENV: string;
  VITE_OWNER: string;
  VITE_POSITION: string;
}
const viteEnv: IEnv = import.meta.env;
</script>
<template>
  <div class="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <section class="main">
      <div class="card">
        <h4>①通過環(huán)境文件傳入的參數(shù)</h4>
        <div class="tips">說明：只包含"VITE_"開頭參數(shù)</div>
        <div>項目owner：{{ viteEnv.VITE_OWNER }}</div>
        <div>owner位置：{{ viteEnv.VITE_POSITION }}</div>
        <div>項目mode：{{ viteEnv.VITE_NODE_ENV }}</div>
      </div>
      <div class="card">
        <h4>②環(huán)境插件傳遞的參數(shù)</h4>
        <div class="tips">
          說明：通過vite-plugin-environment插件傳遞過來，一般為二次計算后的參數(shù)。假如是靜態(tài)參數(shù)值則直接通過方案①傳回來即可。
        </div>
        <p>服務請求域：{{ proxy }}</p>
      </div>
      <div class="card">
        <h4>③Vite環(huán)境自帶參數(shù)</h4>
        <div class="tips">
          說明：Vite默認參數(shù)，參考
          <a  rel="external nofollow" 
            >Vite環(huán)境變量</a
          >
        </div>
        <p>是否為SSR模式：{{ viteEnv.SSR }}</p>
        <p>是否為本地開發(fā)模式：{{ viteEnv.DEV }}</p>
        <p>是否為構(gòu)建模式：{{ viteEnv.PROD }}</p>
        <p>當前啟動命令讀取的mode為：{{ viteEnv.MODE }}</p>
        <p>部署應用時的基本 URL：{{ viteEnv.BASE_URL }}</p>
      </div>
    </section>
  </div>
</template>
<style lang="less" scoped>
.app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.main {
  display: flex;
  .card {
    margin: 10px;
    padding: 10px;
    width: 300px;
    text-align: left;
    background-color: #dbf1e7;
    font-size: 14px;
    h4 {
      margin-bottom: 0;
    }
    .tips {
      margin-bottom: 10px;
      font-size: 12px;
      color: #898989;
    }
  }
}
</style>