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
  • C#.Net的BCL提供了豐富的類型,最基礎的是值類型、引用類型,而他們的共同(隱私)祖先是 System.Object(萬物之源),所以任何類型都可以轉換為Object。 ...
  • 最近有群友咨詢C#如何調用Python?小編嘗試Python.NET過程中遭遇的版本相容性和環境配置難題,小編決定尋找一個更為簡單、穩定且對初學者友好的解決方案。小編搜索一番,除了Python.NET之外,還有其他途徑能夠幫助我們輕鬆地在C#項目調用Python腳本,那就是通過命令行調用,使用 Sy ...
  • .NET中特性+反射 實現數據校驗 在.NET中,我們可以使用特性+反射來實現數據校驗。特性是一種用於為程式中的代碼添加元數據的機制。元數據是與程式中的代碼相關聯的數據,但不直接成為代碼的一部分。通過特性,我們可以為類、方法、屬性等添加額外的信息,這些信息可以在運行時通過反射獲取和使用。 對反射不太 ...
  • Biwen.Settings 是一個簡易的配置項管理模塊,主要的作用就是可以校驗並持久化配置項,比如將自己的配置存儲到資料庫中,JSON文件中等 使用上也是很簡單,只需要在服務中註入配置, 比如我們有一個GithubSetting的配置項,我們只需要定義好對象然後註入到Service中即可: [De ...
  • EDP是一套集組織架構,許可權框架【功能許可權,操作許可權,數據訪問許可權,WebApi許可權】,自動化日誌,動態Interface,WebApi管理等基礎功能於一體的,基於.net的企業應用開發框架。通過友好的編碼方式實現數據行、列許可權的管控。 ...
  • 前言 VB.NET,全名Visual Basic .NET,是Microsoft .NET框架的一部分,是一種面向對象的編程語言。它繼承了Visual Basic的易用性,同時增加了對面向對象編程的支持。VB.NET提供了大量的內置函數,使得開發者可以更容易地處理字元串、數學計算、文件和目錄訪問等任 ...
  • 自定義可移動點二維坐標軸控制項 目錄 路由參數 坐標軸控制項定義 Demo 路由參數 X_YResultCollection為當前X軸對應Y軸值存儲字典 public class ResultCollectionChangedEventArgs(RoutedEvent routedEvent, obje ...
  • 自定義分頁控制項 tip: 該控制項的樣式用的是materialDesign庫,需要下載Nuget包 Code Xaml <UserControl x:Class="TestTool.CustomControls.PagingControl" xmlns="http://schemas.microsof ...
  • 最近群里有個小伙伴把Dapper遷移SqlSugar幾個不能解決的問題進行一個彙總,我正好寫一篇文章來講解一下 一、sql where in傳參問題: SELECT * FROM users where id IN @ids 答: SqlSugar中應該是 var sql="SELECT * FRO ...
  • 安裝nuget包 Wesky.Net.OpenTools 1.0.8或以上版本。支持.net framework 4.6以上版本,以及所有.net core以及以上版本引用。 開發一個簡單的Winform界面,用來測試使用。如需該winform的demo,可以在公眾號【Dotnet Dancer】後 ...