.env.local 配置本地环境变量用于团队开发

蓝莓味柯基

已于 2024-07-18 14:35:11 修改

阅读量656

点赞数 7

分类专栏：前端小技巧文章标签：团队开发 vite

于 2024-07-18 14:24:24 首次发布

本文链接：https://blog.csdn.net/weixin_45705239/article/details/140522190

版权

前端小技巧专栏收录该内容

12 篇文章 0 订阅

订阅专栏

`.env.local`

用途：.env.local 通常用于存储本地开发环境中的环境变量。这些变量可能包括敏感数据或特定于单个开发者的设置，不应该被提交到版本控制系统中。
优先级：在大多数框架中，.env.local 文件中的变量会覆盖其他 .env 文件中的同名变量。这意味着你可以在本地环境中覆盖共享环境变量。
环境：它只在本地开发环境中有效，不应该在生产环境中使用。

使用场景

存储数据库的本地连接字符串
特定于开发者的 API 密钥等。
转发不同的云端开发机地址、端口

在这里插入图片描述

# .env.local
# VITE_PROXY_TARGET="http://10.*.**.33:8888"
VITE_PROXY_TARGET="http://localhost:8888"

vite.config.js

import React from "@vitejs/plugin-react";
import { join } from "path";
import { defineConfig, loadEnv } from "vite";

const mode = process.env.NODE_ENV;
const rootDir = process.cwd();
const env = loadEnv(mode, rootDir, "VITE");

export default defineConfig({
  plugins: [React()],
  build: {
    minify: env.VITE_MINIFY == "true", // 禁用混淆
  },
  resolve: {
    alias: {
      "@": join(__dirname, "src"),
    },
  },
  server: {
    proxy: {
      "/ros": {
        target: env.VITE_PROXY_TARGET,
        changeOrigin: true,
        ws: true,
      },
      },
    },
  },
});

在这个给定的代码片段中，mode 和 rootDir 是两个变量，它们分别获得了当前进程环境的一些特定信息。

mode:

mode 变量通过读取 process.env.NODE_ENV 获得。在Node.js环境中，process.env 是一个包含用户环境信息的对象。NODE_ENV 是一个约定俗成的环境变量，通常用来指明程序运行的模式。最典型的值是：

“development”：开发模式。通常意味着应用处于开发阶段，不会进行代码压缩，可能包括更详细的日志输出。
“production”：生产模式。表示应用正在生产环境中运行。代码可能被压缩和优化，日志输出可能减少以提升性能。
“test”：测试模式。通常在自动化测试时使用。
rootDir:

rootDir:
变量通过调用 process.cwd() 获得。process.cwd() 返回Node.js进程的当前工作目录，即启动Node.js进程时所在的文件夹的路径。这个目录是执行Node.js命令（比如 node 或 npm start）时终端所在的位置，它可以是任何地方，不一定是Node.js应用或脚本所在的目录。

loadEnv:

loadEnv 函数看起来像是被用来加载和解析与Vite相关的环境变量。Vite是一个现代的前端开发与构建工具。在这个上下文中，“VITE”前缀可能意味着该函数将会加载所有以"VITE"开头的环境变量。例如，如果有一个环境变量叫做 VITE_API_URL，那么 loadEnv 函数可能用来获取和解析这个变量的值。

这个函数的参数是 mode、rootDir 和变量名前缀 “VITE”。这表明它会根据当前的运行模式和工作目录加载环境变量。

综上所述，mode 用于确定应用的运行环境，而 rootDir 表示运行命令的文件系统路径。

在vite配置中使用环境变量

环境变量通常可以从 process.env 获得。

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

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ command, mode }) => {
  // 根据当前工作目录中的 `mode` 加载 .env 文件
  // 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。
  const env = loadEnv(mode, process.cwd(), '')
  return {
    // vite 配置
    define: {
      __APP_ENV__: JSON.stringify(env.APP_ENV),
    },
  }
})