VITE中的环境变量和模式

明确什么是环境变量和模式

首先，明确一点，环境变量和模式是两种不同的概念。

下图是模式（mode）：

下面是模式（mode）为test时对应的环境变量（VITE_APP_TITLE和VITE_BASE_URL）：

下面是从.env.test点击进入的文件，可以看到有VITE_APP_TITLE和VITE_BASE_URL，这些就是环境变量。

# .env.test
VITE_APP_TITLE = "标题"

VITE_BASE_URL="/base_url"

内置环境变量和自定义环境变量

自定义环境变量

1. 暴露方法：Vite 在一个特殊的 import.meta.env 对象上暴露环境变量，比如说我想访问VITE_APP_TITLE这个环境变量，那么我要通过 import.meta.env.VITE_APP_TITLE 来在代码中获取

2. 设置方法：在.env.mode文件中设置，该文件位于和package.json同级文件（也就是根目录下），具体env文件详解可见超链接。

3. 命名规则：从上面的例子可以看到自己设置的环境变量在vite中都是以VITE开头的，否则不生效哦

4. html中引用方法:

      <div>
          <p>Using data from %VITE_APP_TITLE%</p>
      </div>

内置环境变量

-   **`import.meta.env.MODE`**: {string} 应用运行的[模式](https://vitejs.cn/vite5-cn/guide/env-and-mode.html#modes)。
-   **`import.meta.env.BASE_URL`**: {string} 部署应用时的基本 URL。他由[`base` 配置项](https://vitejs.cn/vite5-cn/config/shared-options.html#base)决定。
-   **`import.meta.env.PROD`**: {boolean} 应用是否运行在生产环境（使用 `NODE_ENV='production'` 运行开发服务器或构建应用时使用 `NODE_ENV='production'` ）。
-   **`import.meta.env.DEV`**: {boolean} 应用是否运行在开发环境 (永远与 `import.meta.env.PROD`相反)。
-   **`import.meta.env.SSR`**: {boolean} 应用是否运行在 [server](https://vitejs.cn/vite5-cn/guide/ssr.html#conditional-logic) 上。

模式

1. 默认情况下，运行pnpm run dev 命令时 运行在 development (开发) 模式，而 pnpm run build 命令则运行在 production (生产) 模式。
2. 运行pnpm run build时 可以在根目录下新建一个.env.production文件，并且在该文件中声明你想自定义的环境变量，比如：

VITE_APP_TITLE = "标题"

VITE_BASE_URL="/base_url"

3.如果想设置mode为test的模式下的自定义环境变量，则在根目录下新建一个.env.test文件，并且在该文件中声明你想自定义的环境变量，比如：

VITE_APP_TITLE = "标题test"

VITE_BASE_URL="/base_url"

package.json设置为

    "scripts": {
        "dev": "vite",
        "build:test": "vite build --mode=test",
  },

这样 运行pnpm run build:test命令时，就能通过**import.meta.env.VITE_APP_TITLE** 来获取定义的环境变量。

.env 文件

vite根据mode加载.env.mode文件获取在该文件中声明的环境变量

.env                # 所有情况下都会加载
.env.local          # 所有情况下都会加载，但会被 git 忽略
.env.[mode]         # 只在指定模式下加载
.env.[mode].local   # 只在指定模式下加载，但会被 git 忽略

结束

文章如果有不正确的地方，欢迎批评指正。

本文章参考： vite的环境变量和模式