配置 vite 环境变量

vue3--vite环境变量的配置
Vue3+vite配置（Vue3系统篇五）

一. 创建不同环境的.env 文件

.env.development
.env.production
.env.test

# 配置开发环境
touch .env.development 

# 配置生成环境
touch .env.development 

# 配置生成的测试环境
touch .env.test

二. 配置变量

//.env.development  

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_BASE_API = 'http://www.testBaidu.com'

//.env.production     

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'production'
VITE_APP_BASE_API = 'http://www.szBaidu.com'

//.env.test

# 变量必须以 VITE_ 为前缀才能暴露给外部读取
NODE_ENV = 'test'
VITE_APP_BASE_API = 'http://www.sztestBaidu.com'

三 . 访问和使用

变量访问:
通过访问 import.meta.env.VITE_APP_BASE_API 获取变量
注意:必须用计算属性 / 方法包裹才能用，不能直接写在 {{}} 里！
例如:

const  baseURL =  import.meta.env.VITE_APP_BASE_API

// 不能直接写在 {{}} 里
<div> {{  baseURL  }} </div> 

四. pacge.json中配置运行命令

通过 --mode XX 可以指定对应的环境, 其中 XX 对应着你创建的 文件名
例如: 创建 .env.test 文件
对应的运行命令: "dev:test": "vite --mode test"
终端命令: npm run dev: test 运行本地 test 环境

例如: 创建 .env.production文件
对应的运行命令: "dev:pro": "vite --mode production"
终端命令: npm run dev:pro 运行本地 production 环境

注意: 文件中的 `NODE_ENV ` 变量
--mode development  → 读取 .env.development 文件
--mode production   → 读取 .env.production 文件
--mode test   → 读取 .env.test 文件

vite = 跑本地
vite build = 打包上线

vite            →  默认 --mode development   → 读 .env.development
vite build      →  默认 --mode production     → 读 .env.production

运行 npm run dev 会默认自动读取：.env.development （开发环境）
运行 npm run build 会默认自动读取：.env.production （生成环境）

"scripts": {
    "dev": "vite", // 本地开发环境
    "dev:test": "vite --mode test", // 本地测试环境
    "dev: prod": "vite --mode production", // 本地运行生产环境配置

    "build": "vite build", //  打包开发环境包
    "build:test": "vite build --mode test", // 打包测试环境包
    "build:dev": "vite build --mode development", // 打包正式生产环境包
    "preview": "vite preview"   // 预览打包结果
  }

五. 终端运行命令

# 1. 本地运行 开发环境
npm run dev

# 2. 本地运行 测试环境
npm run dev:test

# 3. 本地运行 生产环境配置（本地测线上接口）
npm run dev:prod

# 4. 打包 正式生产环境包（上线用）
npm run build

# 5. 打包 开发环境包
npm run build:dev

# 6. 打包 测试环境包
npm run build:test

# 7. 预览打包后的 dist 文件夹
npm run previe