記錄轉載：Vite多環境配置--讓項目擁有更高定製化能力

来源:https://www.cnblogs.com/smileZAZ/archive/2022/06/09/16359722.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 業務背景 近些年來，隨著前端工程架構發展，使得前端項目中也能擁有如後端工程的模塊能力。正所謂 “能力（越）越大（來），責任（越）越大（捲）”，現在的前端工程不僅僅要滿足業務需求，還伴隨更多複雜的環境適配問題，例如： 1.api請求的功能變數名稱會 ...


這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

業務背景

近些年來，隨著前端工程架構發展，使得前端項目中也能擁有如後端工程的模塊能力。正所謂 “能力（越）越大（來），責任（越）越大（捲）”，現在的前端工程不僅僅要滿足業務需求，還伴隨更多複雜的環境適配問題，例如：

1.api請求的功能變數名稱會根據不同環境而不同；
2.線上環境和測試環境在打包策略有所不同「如線上要隔離sourceMap、屏蔽vue|react devtools等...」；
3.前端spa組件根據不同環境做出不同邏輯；

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

多環境場景的業務形態

我們先來瞭解，在多環境下要求前端工程架構流程是怎樣的？

如上圖所示，在工程啟動 / 構建時：

  1. 環境變數註入：一般通過命令參數模式，可在package.json里配置；

  2. 多模式文件：Vite根據環境變數來讀取配置文件，把文件參數抽取出來做特性區分，這塊也稱為Vite的環境模式；

  3. 環境收集器：簡單理解為1個函數，做的事情就是把第二步的特性參數歸整到一處並做些特定的邏輯，之後通過插件生成客戶端的最終參數並吐出；

  4. 客戶端環境差異定製化：客戶端（也就是工程裡面的.vue、.ts、.tsx等前端文件）獲取到環境參數做一些特定區分邏輯；

  5. 構建和發佈：之後就是項目根據以上幾步產出的環境特性文件來打包，最終推送到服務端完成整個前端工程的生產。

Vite多環境方案實現

多模式文件配置

自定義環境變數

Vite通過 多模式 來配置不同啟動場景下的特性環境變數，你可以創建自定義的模式文件，如下：

 這個項目創建了4種模式分別相容release、beta、測試、本地環境，每種模式下有自己特定的環境變數，例如.env.local的內如如下：

# .env._local
# 透傳客戶端參數
VITE_NODE_ENV=local
VITE_OWNER=Tom
VITE_POSITION=廣州，天河

# 私有參數，僅在vite server獲取到，
# 假如你的項目包含此類敏感變數。應該將文件添加到你的 .gitignore 中，以避免它們被 git 檢入。
MODE_KEY=PRIVATE_KEY_LOCAL

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

至於非“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預設環境變數

Vite 在一個特殊的 import.meta.env 對象上暴露環境變數。這裡有一些在所有情況下都可以使用的內建變數：

import.meta.env.MODE: {string} 應用運行的模式。
import.meta.env.BASE_URL: {string} 部署應用時的基本 URL。他由base 配置項決定。
import.meta.env.PROD: {boolean} 應用是否運行在生產環境。
import.meta.env.DEV: {boolean} 應用是否運行在開發環境 (永遠與 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 應用是否運行在伺服器渲染環境。

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

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

通過插件透傳環境變數

很多情況下，我們的環境變數不僅僅是簡單的字元串，而是通過vite服務中二次計算才能得到最終結果，有點類似Vue中computed或React中useMemo、useCallback的效果。 像這類非靜態的環境變數，我們需要藉助插件能力來讓它們也能夠返回客戶端，插件很多，這裡推薦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

在這個基礎上，我們還能配合模式文件進行聯合判斷：

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); // 設置功能變數名稱和埠

  return {
    base: './',
    plugins: [
      vue(),
      EnvironmentPlugin({
        PROXY: proxy
      })
    ]
  };
});

const env = loadEnv(mode, __dirname);可以獲取.env._local是所有非私密參數，接下來程式可以根據模式參數來計算最終的環境變數，通過插件返回到客戶端。

fetchEnv方法可以理解成環境收集器，裡面可以寫邏輯讓環境參數得到統一整合。

客戶端環境差異定製

這塊就很好理解了，無非就是通過指定方法獲取環境變數，來條件渲染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">
        <h3>①通過環境文件傳入的參數</h3>
        <div class="tips">說明：只包含"VITE_"開頭參數</div>
        <div>項目owner：{{ viteEnv.VITE_OWNER }}</div>
        <div>owner位置：{{ viteEnv.VITE_POSITION }}</div>
        <div>項目mode：{{ viteEnv.VITE_NODE_ENV }}</div>
      </div>
      <div class="card">
        <h3>②環境插件傳遞的參數</h3>
        <div class="tips">
          說明：通過vite-plugin-environment插件傳遞過來，一般為二次計算後的參數。假如是靜態參數值則直接通過方案①傳回來即可。
        </div>
        <p>服務請求域：{{ proxy }}</p>
      </div>
      <div class="card">
        <h3>③Vite環境自帶參數</h3>
        <div class="tips">
          說明：Vite預設參數，參考
          <a href="https://cn.vitejs.dev/guide/env-and-mode.html#env-variables"
            >Vite環境變數</a
          >
        </div>
        <p>是否為SSR模式：{{ viteEnv.SSR }}</p>
        <p>是否為本地開發模式：{{ viteEnv.DEV }}</p>
        <p>是否為構建模式：{{ 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;
    h3 {
      margin-bottom: 0;
    }
    .tips {
      margin-bottom: 10px;
      font-size: 12px;
      color: #898989;
    }
  }
}
</style>

效果圖

解決的業務場景思考

除了本文 “業務背景” 模塊所說的最直觀的場景外，其實還可以做很多項目工程化相關的高階操作。

假如項目構建操作放在遠程伺服器進行，那麼在構建打包前就可以聯動服務api來生產出不同版本、不同模式的構建包，甚至可以把SSR邏輯放到這塊來做，達到“千人千面”的效果。

如果對您有所幫助，歡迎您點個關註，我會定時更新技術文檔，大家一起討論學習，一起進步。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 為什麼 SQL 語句使用了索引，但卻還是慢查詢？
    導讀： 驗證碼作為網路安全的第一道屏障，其重要程度不言而喻。當前，捲積神經網路的高速發展使得許多驗證碼的安全性大大降低，一些新型驗證碼甚至選擇犧牲可用性從而保證安全性。針對對抗樣本技術的研究，給驗證碼領域帶來了新的契機，並已應用於驗證碼反識別當中，為這場曠日持久攻防對抗註入了新的活力。 分享內容包括 ...
  • SQL 如何插入、刪除和更新數據
    本文將會給大家介紹 DBMS 中用來更新表中數據的方法。SQL 數據的更新處理大體可以分為插入（INSERT）、刪除（DELETE）和更新（UPDATE）三類。本文將會對這三類更新方法進行詳細介紹。 一、數據的插入（INSERT 語句的使用方法） 本節重點 使用 INSERT 語句可以向表中插入數據 ...
  • 刷臉認證如何實現人臉又快又準完成校驗？
    互聯網飛速發展的今天，各種App的驗證方法也越來越方便用戶，從一開始的密碼輸入，到後來的指紋解鎖，演變成如今的刷臉認證。刷個臉，就可以解鎖設備、線上/線下支付、通過門禁、快速檢票等。與此同時也伴隨了很多安全問題，首要就是如何判斷用戶的真實性。 HMS Core機器學習服務（ML Kit）的人臉比對和 ...
  • 如何通過A/B測試提升Push推送消息點擊率？
    618電商節火熱進行中，某電商App準備向用戶推送一條全局活動消息，運營準備了兩個推送文案： 文案A：年中囤貨我們更懂你，沒有大優惠怎敢驚動你：美妝個戶，戶外運動，醫療健康，一站式備齊，點擊>> 文案B：全場特價1折起，跨店滿減滿300-30，會員更有折上折，6.1激情預售開啟，現在就搶，一價到底， ...
  • Angular獨立組件簡單體驗
    前言 Angular 14一項令人興奮的特性就是Angular的獨立組件終於來了。 在Angular 14中， 開發者可以嘗試使用獨立組件開發各種組件，但是值得註意的是Angular獨立組件的API仍然沒有穩定下，將來可能存在一些破壞性更新，所以不推薦在生產環境中使用。 如何創建一個獨立組件 對於已 ...
  • JQuery 遍歷的方法
    jQuery parent() 方法 parent() 方法返回被選元素的直接父元素。 該方法只會向上一級對 DOM 樹進行遍歷。 下麵的例子返回每個 <span> 元素的直接父元素： 實例 $(document).ready(function(){ $("span").parent(); }); ...
  • 一個簡單的websocket hook
    一個簡單的 vue3 的 websocket hook. 有以下基礎功能： 創建鏈接 失敗重連 發送心跳包 import { ref } from "vue"; export interface WS_CONFIG { url: string; // ws鏈接地址 sendData?: Record ...
  • JavaScript數據類型BigInt實踐之id數值太大，導致前後端交互異常
    JavaScript基礎數據類型BigInt實踐，JSON-bigint，bignumber.js，JavaScript精度問題 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類