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.json 的 scripts 啟動或打包命令中指定 mode 參數即可，獲取環境變數時使用 process.env.xxx。vite 使用方式類似，但獲取環境變數使用 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_NAME 和 DEMO_STR 兩個變數。

使用 yarn dev:dev 啟動服務，或者先使用 yarn build:dev 打包，再通過 yarn preview 預覽打包結果，瀏覽器中都會輸出 VITE_BASE_API 和 VITE_APP_NAME 的值。VITE_BASE_API 值為 .env.dev 中定義的 /dev-api，VITE_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)——接水滴游戲實現
    原文:Libgdx游戲開發(2)——接水滴游戲實現 - Stars-One的雜貨小窩 本文使用Kotlin語言開發 通過本文的學習可以初步瞭解以下基礎知識的使用: Basic file access Clearing the screen Drawing images Using a camera ...
  • Django 之ModelAdmin對象(補)
    一、後臺管理系統配置 1 在該表對應的models類裡面添加一個Meta類 class Meta: verbose_name_plural = '用戶表' # 指定該表在admin後臺的名字為: 用戶表 # verbose_name = '用戶表' # 末尾還是會自動加s 2 null=True,b ...
  • Python 註冊菜單
    我們看到下麵的示例圖是 在右鍵文件夾上查看菜單，帶有兩級的菜單選項。 文件夾 空白處 需要使用管理員許可權運行 因為右鍵菜單需要註冊表信息，打開註冊表需要管理員許可權UAC，所以在執行命令過程中需要使用管理員許可權來執行命令 import sys import winreg as reg import o ...
  • 已安裝python在cmd命令視窗執行python提示“'python' 不是內部或外部命令，也不是可運行的程式”
    我的博客 這個教程只適合windows，linux不適用，不過話說回來了，linux都是自帶python的，所以已經預置好了，只要打python就行了，根本不用加環境變數 言歸正傳 寫了好長時間的python，最近發現個很基礎的問題，就是很多同學已經安裝python了，但是不知道怎麼運行，找了教程， ...
  • SpringMVC筆記
    一、SpringMVC簡介 1、什麼是MVC MVC是一種軟體架構的思想，將軟體按照模型、視圖、控制器來劃分 **M：**Model，模型層，指工程中的JavaBean，作用是處理數據 JavaBean分為兩類： 一類稱為實體類Bean：專門存儲業務數據的，如Student、User等 一類稱為業務 ...
  • 機器學習實戰-朴素貝葉斯
    本文講述了朴素貝葉斯的原理，概率的計算方式，給出代碼的詳細解釋，並最後給出代碼的運行過程的總結，然後又用了兩個實例來講述朴素貝葉斯代碼的計算過程 ...
  • 推薦一款工具，輔助估算線程池參數
    前言 相信接觸過併發系統的小伙伴們基本都使用過線程池，或多或少調整過對應的參數。以 Java 中的經典模型來說，能夠配置核心線程數、最大線程數、隊列容量等等參數。 public ThreadPoolExecutor(int corePoolSize, int maximumPoolSize, lon ...
一周排行
    -Advertisement-
    Play Games
  • Dapr Outbox 執行流程
    Dapr Outbox 是1.12中的功能。 本文只介紹Dapr Outbox 執行流程，Dapr Outbox基本用法請閱讀官方文檔 。本文中appID=order-processor，topic=orders 本文前提知識：熟悉Dapr狀態管理、Dapr發佈訂閱和Outbox 模式。 Outbo ...
  • Advanced .Net Debugging 7：托管堆與垃圾收集
    引言 在前幾章我們深度講解了單元測試和集成測試的基礎知識，這一章我們來講解一下代碼覆蓋率,代碼覆蓋率是單元測試運行的度量值,覆蓋率通常以百分比表示，用於衡量代碼被測試覆蓋的程度，幫助開發人員評估測試用例的質量和代碼的健壯性。常見的覆蓋率包括語句覆蓋率（Line Coverage）、分支覆蓋率（Bra ...
  • C#S7.NET實現西門子PLCDB塊數據採集的完整步驟
    前言 本文介紹瞭如何使用S7.NET庫實現對西門子PLC DB塊數據的讀寫，記錄了使用電腦模擬，模擬PLC，自至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1.Windows環境下鏈路層網路訪問的行業標準工具（WinPcap_4_1_3.exe）下載鏈接：http ...
  • WPF控制項：密碼框綁定MVVM
    從依賴倒置原則（Dependency Inversion Principle, DIP）到控制反轉（Inversion of Control, IoC）再到依賴註入（Dependency Injection, DI）的演進過程，我們可以理解為一種逐步抽象和解耦的設計思想。這種思想在C#等面向對象的編 ...
  • Python中的私有屬性與私有方法
    關於Python中的私有屬性和私有方法 Python對於類的成員沒有嚴格的訪問控制限制，這與其他面相對對象語言有區別。關於私有屬性和私有方法，有如下要點： 1、通常我們約定，兩個下劃線開頭的屬性是私有的（private）。其他為公共的（public）； 2、類內部可以訪問私有屬性（方法）； 3、類外 ...
  • C++ 訪問說明符詳解：封裝數據，控制訪問，提升安全性
    C++ 訪問說明符 訪問說明符是 C++ 中控制類成員（屬性和方法）可訪問性的關鍵字。它們用於封裝類數據並保護其免受意外修改或濫用。 三種訪問說明符： public：允許從類外部的任何地方訪問成員。 private：僅允許在類內部訪問成員。 protected：允許在類內部及其派生類中訪問成員。 示 ...
  • static_cast與dynamic_cast到底是什麼？
    寫這個隨筆說一下C++的static_cast和dynamic_cast用在子類與父類的指針轉換時的一些事宜。首先，【static_cast，dynamic_cast】【父類指針，子類指針】，兩兩一組，共有4種組合：用 static_cast 父類轉子類、用 static_cast 子類轉父類、使用 ...
  • C語言數據結構：雙向鏈表的增刪操作
    /******************************************************************************************************** * * * 設計雙向鏈表的介面 * * * * Copyright (c) 2023-2 ...
  • @ComponentScan註解的實現，Spring掃描包的過程
    相信接觸過spring做開發的小伙伴們一定使用過@ComponentScan註解 @ComponentScan("com.wangm.lifecycle") public class AppConfig { } @ComponentScan指定basePackage，將包下的類按照一定規則註冊成Be ...
  • opensips開啟python支持
    操作系統 ：CentOS 7.6_x64 opensips版本： 2.4.9 python版本：2.7.5 python作為腳本語言，使用起來很方便，查了下opensips的文檔，支持使用python腳本寫邏輯代碼。今天整理下CentOS7環境下opensips2.4.9的python模塊筆記及使用 ...
所有分類