.env 文件全解析：从入门到实战的项目环境配置指南

原创于 2025-09-07 13:17:30 发布 · 649 阅读

CC 4.0 BY-SA版权

文章标签：

在软件开发过程中，环境配置是一个至关重要的环节。无论是开发环境、测试环境还是生产环境，每个环境都有其独特的配置需求。而.env文件，作为环境变量的载体，能够帮助我们轻松管理这些配置，让项目在不同环境下灵活运行。今天，我们就来深入探讨一下.env文件在项目中的使用。

一、.env文件基础概念

.env文件本质上是一个纯文本文件，用于存储项目的环境变量。它采用键值对的格式，每一行代表一个环境变量，形如KEY=VALUE 。例如：

API_URL=https://api.example.com
DB_USER=admin
DB_PASSWORD=secret123

这种配置方式简单直观，而且通过.env文件管理环境变量，避免了将敏感信息（如数据库密码、API 密钥等）硬编码到项目代码中，大大提高了项目的安全性。

二、哪些项目可以使用.env文件

.env文件的应用范围十分广泛，几乎涵盖了所有现代开发项目：

前端项目：Vue、React、Angular 等前端框架项目，在不同环境下可能需要访问不同的 API 地址、配置不同的项目标题等，.env文件可以轻松满足这些需求。
后端项目：Node.js、Python（Flask、Django）、Java（Spring Boot）、PHP 等后端项目，在连接数据库、配置第三方服务接口时，使用.env文件管理环境变量，能让配置更加灵活。
移动应用：React Native、Flutter 等跨平台移动应用开发项目，同样可以利用.env文件管理不同环境下的配置信息。

三、不同项目中.env文件的配置与使用

（一）Vue 项目

1. 配置文件写法

在 Vue 项目中，使用.env文件时，变量名必须以VUE_APP_开头。同时，Vue 项目还支持根据不同环境创建特定的配置文件：

.env.development：用于开发环境，当项目运行在开发模式（npm run serve）时，该文件中的配置会生效。
.env.production：用于生产环境，当项目进行打包构建（npm run build）时，此文件中的配置将被应用。

例如，在.env.development中可以这样配置：

VUE_APP_API_URL=http://localhost:3000/api
VUE_APP_APP_NAME=开发版应用

在.env.production中配置：

VUE_APP_API_URL=https://prod.api.example.com
VUE_APP_APP_NAME=正式版应用

2. 使用方式

若使用 Vue CLI 构建项目，通过process.env来访问环境变量。在组件中，可这样获取配置：

export default {
  data() {
    return {
      apiUrl: process.env.VUE_APP_API_URL,
      appName: process.env.VUE_APP_APP_NAME
    };
  }
};

若是基于 Vite 构建的 Vue 3 项目，则需要使用import.meta.env来访问环境变量：

export default {
  data() {
    return {
      apiUrl: import.meta.env.VITE_APP_API_URL,
      appName: import.meta.env.VITE_APP_APP_NAME
    };
  }
};

（二）React 项目

1. 配置文件写法

对于 Create React App 创建的 React 项目，变量名必须以REACT_APP_开头。同样也可以根据不同环境创建.env.development和.env.production文件。

例如，.env.development：

REACT_APP_API_URL=http://localhost:5000/api
REACT_APP_ANALYTICS_ID=dev_analytics_id

.env.production：

REACT_APP_API_URL=https://api.production.com
REACT_APP_ANALYTICS_ID=prod_analytics_id

2. 使用方式

在旧版本的 Create React App 项目中，通过process.env访问环境变量：

function App() {
  return (
    <div>
      <p>API地址: {process.env.REACT_APP_API_URL}</p>
      <p>统计ID: {process.env.REACT_APP_ANALYTICS_ID}</p>
    </div>
  );
}

而使用 Vite 构建的 React 项目，需使用import.meta.env获取环境变量：

function App() {
  return (
    <div>
      <p>API地址: {import.meta.env.REACT_APP_API_URL}</p>
      <p>统计ID: {import.meta.env.REACT_APP_ANALYTICS_ID}</p>
    </div>
  );
}

（三）Node.js 项目

在 Node.js 项目中，需要借助第三方库dotenv来加载.env文件中的环境变量。

1. 安装依赖

npm install dotenv --save

2. 配置与使用

在项目的入口文件（如index.js）顶部添加以下代码：

require('dotenv').config();

这样，.env文件中的环境变量就会被加载到process.env中。在后续代码中，就可以通过process.env访问这些变量了：

const apiUrl = process.env.API_URL;
const port = process.env.PORT;
console.log(`API地址：${apiUrl}，端口：${port}`);

四、开发环境与生产环境的区分与配置

（一）环境变量的优先级

在项目中，环境变量的加载遵循一定的优先级顺序（从高到低）：

.env.[mode].local：优先级最高，用于特定环境的本地私有配置，不会被提交到版本控制系统（如 Git）。
.env.[mode]：特定环境的公开配置，例如.env.development和.env.production。
.env.local：通用的本地私有配置。
.env：通用的公开配置，优先级最低。

（二）实际应用场景

以一个前后端分离的项目为例：

开发环境：

前端项目在.env.development中配置：

VUE_APP_API_URL=http://localhost:3000/api

后端项目在.env.development中配置数据库连接信息：

DB_HOST=localhost
DB_PORT=3306
DB_USER=dev_user
DB_PASSWORD=dev_password
DB_NAME=dev_database

生产环境：

前端项目的.env.production配置：

VUE_APP_API_URL=https://prod-api.example.com

后端项目的.env.production配置：

DB_HOST=prod-db.example.com
DB_PORT=3306
DB_USER=prod_user
DB_PASSWORD=prod_password
DB_NAME=prod_database

通过这种方式，实现了项目在不同环境下的灵活配置。

五、使用.env文件的注意事项

敏感信息保护：由于.env文件可能包含敏感信息，一定要将其添加到.gitignore文件中，避免将敏感数据提交到版本控制库中，造成信息泄露。
变量类型问题：所有从.env文件中读取的环境变量值都是字符串类型。如果需要使用数字、布尔等其他类型，需要进行相应的类型转换。例如：
```
const isDebug = process.env.IS_DEBUG === 'true'; // 将字符串转换为布尔值
const port = Number(process.env.PORT); // 将字符串转换为数字
```
重启生效：当修改了.env文件中的内容后，通常需要重新启动项目，新的配置才能生效。

通过以上内容，相信你对.env文件在项目中的使用有了全面的了解。合理运用.env文件，可以让项目的环境配置更加灵活、安全，提高开发效率和项目的可维护性。在实际开发中，不妨多尝试、多实践，充分发挥.env文件的优势。