一、定义环境变量
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
- 文件命名规则
.env.staging
.env.testing
- 在 package.json 中定义
{
"scripts": {
"start:testing": "vite --mode testing",
},
}
- 在 .env.testing 中定义环境变量
VITE_API_PORT=7780
VITE_API_PROJECT_NAME=vue3-vite-demo
VITE_API_BASE_API=/api
