多环境配置

实际开发中，一个常见的需求是分开发、测试、生产环境等使用不同的配置项，Vite提供了import.meta.env对象，用于读取分环境的配置信息。

创建.env文件

下面例子中，假设我们的项目有开发、测试、生产共3个环境，我们创建4个.env文件：

.env：基础通用配置，默认所有环境都会加载，并会被环境配置合并覆盖

.env.development：开发环境配置

.env.test：测试环境配置

.env.production：生产环境配置

此外，如果我们有一些本地的特殊配置，还可以使用.env.local配置文件：

.env.local：所有环境都会加载，覆盖.env

.env.development.local：开发环境的本地配置配置，覆盖.env.development

对于test、production等其它环境我们也都可以创建对应的.env.local配置，不过这些本地配置显然不是通用的，它们应被加入.gitignore文件，而不应被提交到版本控制系统。

.env文件中定义的环境变量必须以VITE_开头，下面是一个.env.development的例子。

VITE_API_BASE_URL=http://localhost:8080

注意：如果想要在环境变量中使用$符号，必须使用\对其进行转义。

命令行指定模式

我们创建.env文件后，就可以在命令行中指定对应的模式了。package.json的Npm Scripts中，我们需要使用--mode来指定激活的环境，下面例子我们在开发阶段使用development模式，在测试环境构建使用test模式，在生产环境构建使用production模式。

{
  // ...
  "scripts": {
    "dev": "vite --mode development",
    "build:test": "vite build --mode test",
    "build:production": "vite build --mode production",
    "build": "vite build --mode production",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  // ...
}

代码中读取环境配置

下面例子代码即可读取到之前配置的VITE_API_BASE_URL值，且是当前激活的模式下的值。

import { useEffect } from "react";

const App = () => {
  useEffect(() => {
    console.log(import.meta.env.VITE_API_BASE_URL);
  }, []);

  return <></>;
};

export default App;

除了直接读取配置的环境变量，我们还可以使用以下信息：

import.meta.env.MODE：当前激活的模式，例如development、production等

import.meta.env.BASE_URL：部署应用时的基础路径，它需要在vite.config.js中的base配置项指定

import.meta.env.PROD：应用是否运行在生产环境，即NODE_ENV='production'

import.meta.env.DEV：应用是否运行在开发环境，非生产环境就是开发环境

注：Vite中，NODE_ENV和模式是两个概念，默认情况下开发服务器模式运行时NODE_ENV='development'，执行构建命令时NODE_ENV='production'。