一、定义环境变量

1. 配置文件命名规则

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载，比如：.env.development 或者 .env.production
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

2. 配置文件内容定义规则：定义变量时以 VITE_ 为前缀 才有效

创建 .env.development 内容如下：

VITE_API_PORT=7780
VITE_API_BASE_API=/api

二、获取环境变量

1. 在 vue 组件和 js 脚本中获取环境变量

// 获取环境变量方式
console.log(import.meta.env);

// 结果：
/**
{
    // 默认环境变量
    "BASE_URL": "/subapp/sub-vue3-vite",
    "DEV": true, 
    "MODE": "development",
    "PROD": false,
    "SSR": false,
    // 自定义环境变量
    "VITE_API_BASE_API": "/api",
    "VITE_API_PORT": "7780",
}
*/

2. 在 vite.config.js 中获取环境变量

import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  console.log(env) // 环境变量，在控制台打印
})

3. 在 html 入口文件中获取

<h1>Vite is running in %MODE%</h1>
<p>Using data from %VITE_API_BASE_API%</p>

三、自定义环境模式 mode

1. 文件命名规则

.env.staging 
.env.testing

2. 在 package.json 中定义

{
  "scripts": {
    "start:testing": "vite --mode testing",
  },
}

3. 在 .env.testing 中定义环境变量

VITE_API_PORT=7780
VITE_API_PROJECT_NAME=vue3-vite-demo
VITE_API_BASE_API=/api