做网编去网站还是工作室好静态网页设计与制作实训报告

环境变量文件（如 .env.development、.env.production、.env.staging）用于根据不同的环境（开发、生产、测试等）配置应用程序的行为。

作用

1. .env.development：用于开发环境的配置。开发人员在本地开发时会使用这个文件中的配置。
2. .env.production：用于生产环境的配置。应用程序在部署到生产环境时会使用这个文件中的配置。
3. .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