Vite多環(huán)境配置項(xiàng)目高定制化能力詳解
業(yè)務(wù)背景
近些年來，隨著前端工程架構(gòu)發(fā)展，使得前端項(xiàng)目中也能擁有如后端工程的模塊能力。正所謂 “能力（越）越大（來），責(zé)任（越）越大（卷）”，現(xiàn)在的前端工程不僅僅要滿足業(yè)務(wù)需求，還伴隨更多復(fù)雜的環(huán)境適配問題，例如：
- api請(qǐng)求的域名會(huì)根據(jù)不同環(huán)境而不同；
- 線上環(huán)境和測(cè)試環(huán)境在打包策略有所不同「如線上要隔離sourceMap、屏蔽vue|react devtools等...」；
- 前端spa組件根據(jù)不同環(huán)境做出不同邏輯；
老板恨不得把所有應(yīng)用端都收歸到一個(gè)項(xiàng)目里面，什么微前端、uniapp多端方案接踵而至。。。但無論是什么方案，都離不開一個(gè)核心點(diǎn)：環(huán)境變量和多環(huán)境適配。那么，今天我們就來聊下如何在Vite中實(shí)現(xiàn)一套拓展能力強(qiáng)的多環(huán)境適配方案。
多環(huán)境場(chǎng)景的業(yè)務(wù)形態(tài)
我們先來了解，在多環(huán)境下要求前端工程架構(gòu)流程是怎樣的？
如上圖所示，在工程啟動(dòng) / 構(gòu)建時(shí)：
- 環(huán)境變量注入：一般通過命令參數(shù)模式，可在package.json里配置；
- 多模式文件：Vite根據(jù)環(huán)境變量來讀取配置文件，把文件參數(shù)抽取出來做特性區(qū)分，這塊也稱為Vite的環(huán)境模式；
- 環(huán)境收集器：簡(jiǎn)單理解為1個(gè)函數(shù)，做的事情就是把第二步的特性參數(shù)歸整到一處并做些特定的邏輯，之后通過插件生成客戶端的最終參數(shù)并吐出；
- 客戶端環(huán)境差異定制化：客戶端（也就是工程里面的.vue、.ts、.tsx等前端文件）獲取到環(huán)境參數(shù)做一些特定區(qū)分邏輯；
- 構(gòu)建和發(fā)布：之后就是項(xiàng)目根據(jù)以上幾步產(chǎn)出的環(huán)境特性文件來打包，最終推送到服務(wù)端完成整個(gè)前端工程的生產(chǎn)。
以上是大體流程，接下來會(huì)每步細(xì)分給大家講解如何實(shí)現(xiàn)。方便大家理解，本次筆者專門開了個(gè)新GitHub項(xiàng)目來存放本文所有實(shí)現(xiàn)代碼，有興趣的同學(xué)可以拿下來實(shí)操下????。
Vite多環(huán)境方案實(shí)現(xiàn)
多模式文件配置
自定義環(huán)境變量
Vite通過 多模式 來配置不同啟動(dòng)場(chǎng)景下的特性環(huán)境變量，你可以創(chuàng)建自定義的模式文件，如下：
這個(gè)項(xiàng)目創(chuàng)建了4種模式分別兼容release、beta、測(cè)試、本地環(huán)境，每種模式下有自己特定的環(huán)境變量，例如.env.local的內(nèi)如如下：
# .env._local # 透?jìng)骺蛻舳藚?shù) VITE_NODE_ENV=local VITE_OWNER=Tom VITE_POSITION=廣州，天河 # 私有參數(shù)，僅在vite server獲取到， # 假如你的項(xiàng)目包含此類敏感變量。應(yīng)該將文件添加到你的 .gitignore 中，以避免它們被 git 檢入。 MODE_KEY=PRIVATE_KEY_LOCAL
根據(jù)Vite的約定規(guī)則，只有以“VITE_”開頭的變量才會(huì)在客戶端被捕獲，捕獲方式為：import.meta.env.{參數(shù)名}。
至于非“VITE_”開頭的變量屬于私有屬性，不會(huì)傳遞出去。假如你的項(xiàng)目包含此類敏感變量。應(yīng)該將文件添加到你的 .gitignore 中，以避免它們被 git 檢入。
完成上述配置后，我們只需要在package.json增加對(duì)應(yīng)的啟動(dòng)命令就可以讓Vite獲取哪個(gè)模式來運(yùn)行項(xiàng)目了：
{
"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默認(rèn)環(huán)境變量
Vite 在一個(gè)特殊的 import.meta.env 對(duì)象上暴露環(huán)境變量。這里有一些在所有情況下都可以使用的內(nèi)建變量：
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)行在開發(fā)環(huán)境 (永遠(yuǎn)與 import.meta.env.PROD相反)。
import.meta.env.SSR: {boolean} 應(yīng)用是否運(yùn)行在服務(wù)器渲染環(huán)境。
這里補(bǔ)充說明下，DEV 和 PROD分別對(duì)應(yīng)package.json中啟動(dòng)dev和build命令決定的，而SSR則是對(duì)應(yīng)了Vite啟動(dòng)時(shí)設(shè)定的middlewareMode變量決定的：
const { createServer: createViteServer } = require('vite')
const vite = await createViteServer({
server: { middlewareMode: 'ssr' }
})
通過插件透?jìng)鳝h(huán)境變量
很多情況下，我們的環(huán)境變量不僅僅是簡(jiǎn)單的字符串，而是通過vite服務(wù)中二次計(jì)算才能得到最終結(jié)果，有點(diǎn)類似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
在這個(gè)基礎(chǔ)上，我們還能配合模式文件進(jìn)行聯(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ù)來計(jì)算最終的環(huán)境變量，通過插件返回到客戶端。
fetchEnv方法可以理解成環(huán)境收集器，里面可以寫邏輯讓環(huán)境參數(shù)得到統(tǒng)一整合。
客戶端環(huán)境差異定制
這塊就很好理解了，無非就是通過指定方法獲取環(huán)境變量，來?xiàng)l件渲染vue或React組件。
下面做了個(gè)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>項(xiàng)目owner：{{ viteEnv.VITE_OWNER }}</div>
<div>owner位置：{{ viteEnv.VITE_POSITION }}</div>
<div>項(xiàng)目mode：{{ viteEnv.VITE_NODE_ENV }}</div>
</div>
<div class="card">
<h4>②環(huán)境插件傳遞的參數(shù)</h4>
<div class="tips">
說明：通過vite-plugin-environment插件傳遞過來，一般為二次計(jì)算后的參數(shù)。假如是靜態(tài)參數(shù)值則直接通過方案①傳回來即可。
</div>
<p>服務(wù)請(qǐng)求域：{{ proxy }}</p>
</div>
<div class="card">
<h4>③Vite環(huán)境自帶參數(shù)</h4>
<div class="tips">
說明：Vite默認(rèn)參數(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>當(dāng)前啟動(dòng)命令讀取的mode為：{{ viteEnv.MODE }}</p>
<p>部署應(yīng)用時(shí)的基本 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>
效果圖
解決的業(yè)務(wù)場(chǎng)景思考
除了本文 “業(yè)務(wù)背景” 模塊所說的最直觀的場(chǎng)景外，其實(shí)還可以做很多項(xiàng)目工程化相關(guān)的高階操作。
假如項(xiàng)目構(gòu)建操作放在遠(yuǎn)程服務(wù)器進(jìn)行，那么在構(gòu)建打包前就可以聯(lián)動(dòng)服務(wù)api來生產(chǎn)出不同版本、不同模式的構(gòu)建包，甚至可以把SSR邏輯放到這塊來做，達(dá)到“千人千面”的效果。
以上就是Vite多環(huán)境配置項(xiàng)目高定制化能力詳解的詳細(xì)內(nèi)容，更多關(guān)于Vite多環(huán)境配置項(xiàng)目高定制的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue 2.0在IE11中打開項(xiàng)目頁面空白的問題解決
這篇文章主要給大家介紹了關(guān)于Vue 2.0在ie 11中打開項(xiàng)目頁面空白問題的解決方法，文中詳細(xì)分析出現(xiàn)該問題的原因，并給出了詳細(xì)的解決方法，需要的朋友可以參考借鑒，下面跟著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了Vue3中的組件數(shù)據(jù)懶加載問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3中關(guān)于setup與自定義指令，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-04-04
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要給大家介紹了vue項(xiàng)目中使用axios上傳圖片等文件操作，需要的朋友參考下吧2017-11-11
通過實(shí)例解析vuejs如何實(shí)現(xiàn)調(diào)試代碼
這篇文章主要介紹了通過實(shí)例解析vuejs如何實(shí)現(xiàn)調(diào)試代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求
這篇文章主要介紹了Vue 實(shí)現(xiàn)監(jiān)聽窗口關(guān)閉事件,并在窗口關(guān)閉前發(fā)送請(qǐng)求，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue+elementUI如何實(shí)現(xiàn)頂部路由標(biāo)簽跳轉(zhuǎn)
這篇文章主要介紹了vue+elementUI如何實(shí)現(xiàn)頂部路由標(biāo)簽跳轉(zhuǎn)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue輕松實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼
移動(dòng)端網(wǎng)頁的日常開發(fā)中,偶爾會(huì)包含一些渲染長(zhǎng)列表的場(chǎng)景，本文主要介紹了vue 虛擬滾動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Vue+Echarts實(shí)現(xiàn)基本K線圖的繪制
這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)基本K線圖的繪制，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-03-03
Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭
這篇文章主要介紹了Vue如何為GET或POST請(qǐng)求設(shè)置請(qǐng)求頭，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04