原文作者：我輩李想
版權聲明：文章原創，轉載時請務必加上原文超鏈接、作者信息和本聲明。

---

---

前言

目前vue程序可以通過cli和vite兩種方式構建，但是兩種方式加載env的方式有些不同，這里基于自己的理解簡單記錄。

---

一、env文件

通過我們會在項目的根目錄下創建.env文件，通常包括.env、.env.dev、.env.pro、.env.test，這里的env文件跟后邊的動態加載有關。

二、vue3+cli加載env

1…env配置

通過cli加載env，配置中名字需要以VUE_APP開頭

VUE_APP_PORT = 8000

2…dev配置（其他環境參考）

VUE_APP_BASE_URL_API="http://127.0.0.1:8000/api/"
VUE_APP_ENV = 'development'

3.package.json文件

{"name": "ruleVue","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve --mode dev","build": "vue-cli-service build --mode pro","lint": "vue-cli-service lint --mode test"},...
}

4.使用

三、vue3+vite加載env

1…env配置

通過cli加載env，配置中名字需要以VITE_開頭

VITE_PORT = 8000

2…dev配置（其他環境參考）

VITE_BASE_URL_API="http://127.0.0.1:8000/api/"
VITE_ENV = 'development'

3.package.json文件

	"scripts": {"dev": "vite --mode dev","pro": "vite --mode pro","build:dev": "vite build --mode dev","build:pro": "vite build --mode pro","preview": "vite preview"},...

4.使用

import.meta.env.VITE_API_URL