环境变量文件(如 .env.development
、.env.production
、.env.staging
)用于根据不同的环境(开发、生产、测试等)配置应用程序的行为。
作用
.env.development
:用于开发环境的配置。开发人员在本地开发时会使用这个文件中的配置。.env.production
:用于生产环境的配置。应用程序在部署到生产环境时会使用这个文件中的配置。.env.staging
:用于预发布环境的配置。通常用于测试和验证即将发布到生产环境的版本。
如何使用和配置
详细步骤:
1. 创建环境变量文件
在项目的根目录下创建以下文件:
.env.development
.env.production
.env.staging
2. 配置环境变量
在每个文件中添加环境变量。例如:
.env.development
:
VITE_API_URL=http://localhost:3000/api
VITE_APP_MODE=development
.env.production
:
VITE_API_URL=https://api.example.com
VITE_APP_MODE=production
.env.staging
:
VITE_API_URL=https://staging-api.example.com
VITE_APP_MODE=staging
3. 在代码中使用环境变量
在 Vite 项目中,所有以 VITE_
开头的环境变量都可以在代码中通过 import.meta.env
访问。例如:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.VITE_APP_MODE);
4. 配置 Vite 以使用不同的环境文件
Vite 会根据 NODE_ENV
环境变量自动加载相应的 .env
文件。你可以通过在启动脚本中设置 NODE_ENV
来指定使用哪个环境文件。
package.json:
{"scripts": {"dev": "vite --mode development","build": "vite build --mode production","serve": "vite preview --mode production","staging": "vite build --mode staging"}
}
在上述配置中:
npm run dev
会使用.env.development
文件。npm run build
和npm run serve
会使用.env.production
文件。npm run staging
会使用.env.staging
文件。
5. 运行项目
根据需要运行不同的脚本:
-
开发环境:
npm run dev
-
生产环境:
npm run build npm run serve
-
预发布环境:
npm run staging
示例项目结构
以下是一个示例项目结构,展示了如何组织和使用环境变量文件:
my-vite-project/
├── .env.development
├── .env.production
├── .env.staging
├── package.json
├── src/
│ ├── main.js
│ └── App.vue
└── vite.config.js