Vue3 Vite3 多環境配置 - 基於 vite 創建 vue3 全家桶項目(續篇)

来源:https://www.cnblogs.com/youyacoder/archive/2022/10/06/16758042.html
-Advertisement-
Play Games

在項目或產品的迭代過程中,通常會有多套環境,常見的有: dev:開發環境 sit:集成測試環境 uat:用戶接收測試環境 pre:預生產環境 prod:生產環境 環境之間配置可能存在差異,如介面地址、全局參數等。在基於 vue-cli (webpack) 的項目中只需要添加 .env.xxx 文件, ...


在項目或產品的迭代過程中,通常會有多套環境,常見的有:

  • dev:開發環境
  • sit:集成測試環境
  • uat:用戶接收測試環境
  • pre:預生產環境
  • prod:生產環境

環境之間配置可能存在差異,如介面地址、全局參數等。在基於 vue-cli (webpack) 的項目中只需要添加 .env.xxx 文件,然後在 package.jsonscripts 啟動或打包命令中指定 mode 參數即可,獲取環境變數時使用 process.env.xxxvite 使用方式類似,但獲取環境變數使用 import.meta.env

1 環境變數和模式

上面提到,vite 中使用 import.meta.env 的方式來獲取環境變數。在 main.ts 中添加如下代碼進行測試:

const env = import.meta.env
console.log(env)

1.1 development

首先執行 yarn dev 啟動服務,在瀏覽器控制台輸出 env 的值:

image-20221006002025067

可以看出 import.mata.env 中預設包括五個內置環境變數:

MODE:應用的運行模式。由於我們是通過 yarn dev 啟動服務,而 yarn dev 本質是執行 vite 啟動,未顯式執行 mode,故 MODE 的值為 development

BASE_URL:部署應用時的基本 URL,在 vite 的配置文件 vite.config.ts 中的 base 屬性指定;

PROD:是否是生產環境(即是否通過 vite build 構建)

DEV:是否是開發環境(即是否通過 vite 啟動服務運行)

SSR:是否是服務端渲染模式。

1.2 production

首先執行 yarn build 打包(本質上是執行 vite build),打包完成後通過 yarn preview 對打包結果進行預覽。訪問預覽地址,在瀏覽器控制塔輸出如下:

image-20221006002902362

可以看出模式為 production,非開發模式,是生產模式。

1.3 指定模式

修改 package.json 中的 scripts 命令,分別為開發和打包指定三種模式:dev、uat、prod。指定模式只需要在命令後通過參數 --mode 指定即可。

"scripts": {
  "dev": "yarn dev:dev",
  "dev:dev": "vite --mode dev",
  "dev:uat": "vite --mode uat",
  "dev:prod": "vite --mode prod",
  "build:dev": "vue-tsc --noEmit && vite build --mode dev",
  "build:uat": "vue-tsc --noEmit && vite build --mode uat",
  "build:prod": "vue-tsc --noEmit && vite build --mode prod",
  "preview": "vite preview"
},

執行 yarn dev:dev,瀏覽器輸出 MODE: dev

執行 yarn dev:uat,瀏覽器輸出 MODE: uat

執行 yarn dev:prod,瀏覽器輸出 MODE: prod

接下來依次通過 build:xxx 先打包後再通過 preview 預覽打包,結果與上面一致,瀏覽器輸出的 MODE 與命令中 --mode 指定的值一致。

2 環境文件(.env)

Vite 使用 dotenv環境文件目錄 中載入環境文件,預設情況下,環境文件目錄為項目的根目錄,即把環境文件放在項目根目錄下。在 vite 中,可以通過配置 envDir 屬性指定環境文件目錄。

2.1 指定環境文件目錄

在項目根目錄下創建目錄 env,用於存放所有的環境文件。

vite.config.ts 中添加 envDir 屬性指定環境文件目錄為 env

...
export default defineConfig({
  ...
  envDir: path.resolve(__dirname, './env')
})

2.2 添加環境文件

環境文件命名如下:

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

不同環境的變數可以定義在 .env.[mode] 文件中,如 .env.dev.env.prod 等,如果 .env 文件和 .env.[mode] 中有相同的 key,後者定義的值會覆蓋前者。

這裡咱們以三個環境為例編寫 demo,分別是:

  • 開發環境,mode 為 dev,文件名為 .env.dev
  • 測試環境,mode 為 uat,文件名為 .env.uat
  • 生產環境,mode 為 prod,文件名為 .env.prod

在上面指定的環境文件目錄 env 下創建上面三個文件,以及所有情況下都會載入的 .env 文件。四個文件內容如下:

.env 文件

VITE_BASE_API=/api
VITE_APP_NAME='demo app'
DEMO_STR=hello

.env.dev 文件

VITE_BASE_API=/dev-api

.env.uat 文件

VITE_BASE_API=/uat-api

.env.prod 文件

VITE_BASE_API=/prod-api

四個文件都定義了變數 VITE_BASE_API.env 中還額外定義了 VITE_APP_NAMEDEMO_STR 兩個變數。

使用 yarn dev:dev 啟動服務,或者先使用 yarn build:dev 打包,再通過 yarn preview 預覽打包結果,瀏覽器中都會輸出 VITE_BASE_APIVITE_APP_NAME 的值。VITE_BASE_API 值為 .env.dev 中定義的 /dev-apiVITE_APP_NAME 值為 .env 中定義的 demo app,但是 .env 中定義的 DEMO_STR 不會輸出。由此可以看出:

  1. 無論是哪種模式,.env 文件都會被載入;
  2. 如果 .env.[mode].env 中有相同的 key,對應模式的環境文件中的值會覆蓋 .env 對應 key 的值;
  3. 環境變數需要以 VITE_ 開頭才會暴露到 import.meta.env 中。

有興趣的朋友可以再添加 .env.dev.local 文件進行測試,.env.[mode].local 優先順序最高。

3 TypeScript 提示

我使用的 IDE 是 WebStorm,之前在 main.ts 中將 import.meta.env 賦值給變數 env

const env = import.meta.env

輸入 env.,WebStorm會有下圖中的提示:

image-20221006110746181

但是沒有提示我們添加的環境變數。可以添加 env.d.ts 解決。在 src 目錄下創建文件 env.d.ts,文件內容如下:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_BASE_API: string;
  readonly VITE_APP_NAME: string;
}

// eslint-disable-next-line no-unused-vars
interface ImportMeta {
  readonly env: ImportMetaEnv
}

在 ImportMetaEnv 中添加上環境文件中定義的變數即可。

此時再次在 main.ts 中輸入 env.,IDEA便可以有正確的代碼提示,並且可以獲取該變數的類型:

image-20221006111522409

4 補充說明

在基於 vue-cli(webpack) 的項目中獲取環境變數是通過 process.env.xxx 的方式,如果不進行配置,在瀏覽器中會報錯,提示 process is undefine。於是我按照網上的方式,在 vite.config.ts 中首先通過 vite 提供的 loadEnv 函數載入環境變數,然後在導出對象中添加 define 屬性,在 define 中將 loadEnv 返回的結果賦值給 process.env,如下:

define: {
  'process.env': loadEnv(env.mode, process.cwd(), '')
}

通過這種方式,在開發模式下(vite 啟動服務),可以正常獲取到環境變數,甚至環境變數不要求以 VITE_ 開頭。但是使用 vite build 打包一直失敗,在使用了 process.env 提示 parse error,到現在也不知道怎麼處理。如果知道怎麼處理的伙伴歡迎留言。

不過個人更推薦按照官方的方式,使用 import.meta.env

文中 demo 在 github 上搜索 vue3-vite-archetype 獲取,main 分支可以直接 yarn dev 啟動運行; template 分支是 yyg-cli 執行 yyg create 創建項目時拉取的模板。你也可以先執行 npm install -g yyg-cli 安裝 yyg-cli 腳手架工具,然後通過 yyg create xxx 創建項目,創建後的項目包含了 vue3 vite 的全部demo。


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

-Advertisement-
Play Games
更多相關文章
  • 上一章講到如何將程式寫入到ESP8266 WiFi模塊中,實現物聯網終端對硬體的控制。本章將通過fubuki-iot實現自定義硬體控制。同時給出一個替代百度API的方案。 硬體準備 (無) 自定義語義模型 在第一章的“提醒事項”的例子中,fubuki-iot就展現了語義模型的功能。它將命中語義模型的 ...
  • 原文:Libgdx游戲開發(2)——接水滴游戲實現 - Stars-One的雜貨小窩 本文使用Kotlin語言開發 通過本文的學習可以初步瞭解以下基礎知識的使用: Basic file access Clearing the screen Drawing images Using a camera ...
  • 一、後臺管理系統配置 1 在該表對應的models類裡面添加一個Meta類 class Meta: verbose_name_plural = '用戶表' # 指定該表在admin後臺的名字為: 用戶表 # verbose_name = '用戶表' # 末尾還是會自動加s 2 null=True,b ...
  • 我們看到下麵的示例圖是 在右鍵文件夾上查看菜單,帶有兩級的菜單選項。 文件夾 空白處 需要使用管理員許可權運行 因為右鍵菜單需要註冊表信息,打開註冊表需要管理員許可權UAC,所以在執行命令過程中需要使用管理員許可權來執行命令 import sys import winreg as reg import o ...
  • 我的博客 這個教程只適合windows,linux不適用,不過話說回來了,linux都是自帶python的,所以已經預置好了,只要打python就行了,根本不用加環境變數 言歸正傳 寫了好長時間的python,最近發現個很基礎的問題,就是很多同學已經安裝python了,但是不知道怎麼運行,找了教程, ...
  • 一、SpringMVC簡介 1、什麼是MVC MVC是一種軟體架構的思想,將軟體按照模型、視圖、控制器來劃分 **M:**Model,模型層,指工程中的JavaBean,作用是處理數據 JavaBean分為兩類: 一類稱為實體類Bean:專門存儲業務數據的,如Student、User等 一類稱為業務 ...
  • 本文講述了朴素貝葉斯的原理,概率的計算方式,給出代碼的詳細解釋,並最後給出代碼的運行過程的總結,然後又用了兩個實例來講述朴素貝葉斯代碼的計算過程 ...
  • 前言 相信接觸過併發系統的小伙伴們基本都使用過線程池,或多或少調整過對應的參數。以 Java 中的經典模型來說,能夠配置核心線程數、最大線程數、隊列容量等等參數。 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, lon ...
一周排行
    -Advertisement-
    Play Games
  • 人臉識別技術在現代社會中扮演著越來越重要的角色,比如人臉識別門禁、人臉識別支付、甚至人臉識別網站登錄等。 最近有群友問.NET有沒有人臉識別的組件,小編查閱相關資料介紹下麵幾種.NET人臉識別組件供大家參考。 **1、Microsoft Azure Face API** 簡介:Microsoft A ...
  • # 1. 與 .NET Core 緩存的關係和差異 ABP 框架中的緩存系統核心包是 [Volo.Abp.Caching](https://www.nuget.org/packages/Volo.Abp.Caching) ,而對於分散式緩存的支持,abp 官方提供了基於 Redis 的方案,需要安裝 ...
  • 最近ET做熱更重載dll的時候,返回登陸會重新檢測新的dll,首次登錄之前已經Assembly.Load()過一次dll,第二次返回登陸再次load dll到記憶體中,Invoke執行方法的時候,異常了,有些方法執行了,有些未執行,於是查資料,看到些老資料說Assembly.Load重覆載入同名dll ...
  • 1. 擴展方法 擴展方法使你能夠向現有類型“添加”方法,而無需創建新的派生類型、重新編譯或以其他方式修改原始類型。 擴展方法是一種靜態方法,但可以像擴展類型上的實例方法一樣進行調用。 對於用 C#、F# 和 Visual Basic 編寫的客戶端代碼,調用擴展方法與調用在類型中定義的方法沒有明顯區別 ...
  • 以前在隨筆《Winform開發框架之客戶關係管理系統(CRM)的開發總結系列1-界面功能展示 》的幾篇隨筆中介紹過基於WInform開發框架開發的CRM系統,系統的功能主要也是圍繞著客戶相關信息來進行管理的。本篇隨筆介紹在最新的《SqlSugar開發框架》中整合CRM系統模塊的功能。 ...
  • 隨著技術的發展,ASP.NET Core MVC也推出了好長時間,經過不斷的版本更新迭代,已經越來越完善,本系列文章主要講解ASP.NET Core MVC開發B/S系統過程中所涉及到的相關內容,適用於初學者,在校畢業生,或其他想從事ASP.NET Core MVC 系統開發的人員。 經過前幾篇文章... ...
  • [toc] 這篇文章是我之前總結的一篇文章,因為整理博客的原因,原有博客已經註銷,但這篇文章對一些讀者很有用,所以現在新瓶裝舊酒重新整理回來分享給大家。 最近一段時間生產環境頻繁出問題,每次都會生成一個hs_err_pid*.log文件,因為工作內容的原因,在此之前並沒有瞭解過相關內容,趁此機會學習 ...
  • # 前言 在上一篇文章中,給大家講解了泛型的概念、作用、使用場景,以及泛型集合、泛型介面和泛型類的用法,但受限於篇幅,並沒有把泛型的內容講解完畢。所以今天我們會繼續學習泛型方法、泛型擦除,以及通配符等的內容,希望大家繼續做好學習的準備哦。 *** 全文大約【**4600】** 字,不說廢話,只講可以 ...
  • 昨天遇到參數key大小寫不一致導致校驗簽名失敗的問題,查了很長時間才找到原因。看了一下FastJson源碼,發現JSON.toObject中轉換成對象的時候會忽略大小寫。 所以,當使用了JSON.toObject將json轉成Java對象後,再用JSON.toObject轉成json,key值就變了 ...
  • 基於java的線上商城設計與實現,線上購物平臺,校園購物商城,商品銷售平臺,基於Java的電商平臺;電商平臺,買家和賣家可以在此平臺上進行銷售和交易,節約了大量的線下時間成本,購物車的功能,校園交易平臺等等; ...