vue3环境变量和模式

---

获取环境变量和模式mode值：

console.log('mode模式：main.js里取值', import.meta.env)
console.log('mode模式：vite.config.js里取值', mode)
console.log('环境变量', process.env.NODE_ENV)

一般是使用mode和process.env.NODE_ENV ； 不太使用.env 文件中NODE_ENV（用来知道哪个环境而已）

一、vite文档介绍环境变量

1.环境变量

一定要先阅读一遍环境变量

1.1创建文件

在项目根目录直接创建.env 、.env.beta 、 .env.test 、.env.production；但是有的项目是在env文件下新建这些环境、模式配置

– .env 是公共配置；所有环境默认加载，且会被其他环境的值给覆盖的
– 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量 才会暴露 给经过 vite 处理的代码

.env.beta：

2.NODE_ENV 和 模式

NODE_ENV 和 模式是两个东西

2.1process.env.NODE_ENV（Node.js 环境变量）

– 作用：控制开发工具、调试信息和打包优化的启用或关闭。
NODE_ENV 是 Node.js 中的环境变量，用于定义当前的运行环境，常见的取值包括：

• development：用于开发环境。这时，Vite 会启动一个本地开发服务器，并启用热更新等开发工具。
• production：用于生产环境。这时，Vite 会执行项目的生产构建，生成优化后的静态文件。
• test：用于测试环境，通常在运行测试框架时使用。

– 在 Vue 3 中，NODE_ENV 由 Vite 自动设置：

启动开发服务器（vite 或 npm run dev）时，NODE_ENV 被设为 development。
进行生产构建（vite build 或 npm run build）时，NODE_ENV 被设为 production。
不要在 .env 文件中设置 NODE_ENV 为非标准值（如 beta）
通常有以下几个标准值：develop、production、test

– 获取：

console.log('环境变量', process.env.NODE_ENV)

– NODE_ENV 是 Node.js 中的环境变量，通常有以下几个标准值：

2.2 模式（mode）

– 作用：

1.Vite 会根据启动或打包的 mode 的值 加载对应的 .env.[mode] 文件
2.定制化项目配置：不同模式下，可以根据不同的需求配置不同的环境变量，如只线上模式使用某些依赖插件、 API 地址、第三方服务的密钥等。
3.一般创建多个模式管理变量，例如：.env.beta 、 .env.develop 、 .env.test 、.env.production

4.在package.json中定义用于管理和运行项目的脚本命令：

例如：npm run test1命令会启动production2环境 使用.env.test2的模式配置

  "scripts": {
    "dev": "vite --mode beta --host",
    "test1": "NODE_ENV=production2 vite --mode test2 --host",
    "develop": "vite build --mode develop",
    "test": "vite build --mode test",
    "online": "vite build --mode online",
    "build": "vite build",
    "build:electron": "vite build --mode electron",
    "build:prod": "pnpm test && pnpm build:electron",
    "preview": "vite preview",
    "prettier": "npx prettier . --write"
  },

.env.test2文件：

# 测试环境
NODE_ENV = "test3" // 但是一般这个值写的是mode的值

# 测试环境
VITE_APP_SERVEICE = 'http://192.168.100.99:1234'

# 测试环境
VITE_APP_PORT = '53021'

– 获取：

console.log('mode模式：main.js里取值', import.meta.env)
console.log('mode模式：vite.config.js里取值', mode)
console.log('环境变量', process.env.NODE_ENV)

– 总结：

二、loadEnv获取环境变量（针对在env文件夹下）

正常情况下在项目根目录直接创建.env.beta 、 .env.test 、.env.production；获取值就是使用 console.log('环境变量', process.env.NODE_ENV)

.
.
但是有的项目是在env文件下新建这三个模式配置

Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

在 Vite 中，使用 loadEnv 函数可以方便地加载指定模式下的环境变量文件（如 .env.beta、.env.production 等）。以下是如何使用 loadEnv 的步骤：

2.1创建环境变量文件

确保你的项目根目录下有相应的 .env 文件，例如：

• .env
• .env.beta
• .env.production

这些文件可以包含键值对的环境变量，例如：

# .env.beta
VITE_API_URL=https://beta.api.example.com
VITE_OTHER_CONFIG=some_value

2. 使用 loadEnv 加载环境变量

在 Vite 的配置文件中（通常是 vite.config.js 或 vite.config.ts），可以使用 loadEnv 来加载环境变量。

示例代码：

import { loadEnv, defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  // 加载对应模式的环境变量
  const env = loadEnv(mode, process.cwd());

  console.log(env); // 打印当前加载的环境变量

  return {
    // Vite 配置
    define: {
      'process.env': env, // 可选：将环境变量挂载到 process.env
    },
  };
});

3. 访问环境变量

在应用代码中，可以通过 import.meta.env 访问加载的环境变量。例如：

console.log(import.meta.env.VITE_API_URL); // 输出对应环境的 API URL

三、process.env.NODE_ENV 和 .env 文件中配置的 NODE_ENV 的区别和联系

一般是使用mode和process.env.NODE_ENV ； 不太使用.env 文件中NODE_ENV（用来知道哪个环境而已）