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

.env.local

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

使用场景

  • 存储数据库的本地连接字符串
  • 特定于开发者的 API 密钥等。
  • 转发不同的云端开发机地址、端口
shell 复制代码
# .env.local
# VITE_PROXY_TARGET="http://10.*.**.33:8888"
VITE_PROXY_TARGET="http://localhost:8888"

vite.config.js

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 文件。

js 复制代码
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),
    },
  }
})
相关推荐
DevinJohw1 天前
为什么我选择[email protected]
react.js·vite
页面魔术2 天前
[译]专访尤雨溪: 2025年有什么计划?
前端·vue.js·vite
用户74054639943092 天前
Vite开发服务器遇到大量依赖需要优化导致重启的问题
vite
前端与小赵2 天前
webpack和vite之间的区别
前端·webpack·vite
给钱,谢谢!3 天前
记录vite引入sass预编译报错error during build: [vite:css] [sass] Undefined variable.问题
前端·css·sass·vite
小遁哥3 天前
vue3接入tailwindcss3
css·vue.js·vite
IDRSolutions_CN3 天前
如何用Java拆分PDF文件(教程)
java·经验分享·pdf·软件工程·团队开发
努力向上的年轻人3 天前
2025年新手入门DevOps工具选型指南
运维·gitee·团队开发·敏捷开发·devops·源代码管理
jonyleek4 天前
【JVS更新日志】低代码、规则引擎、智能BI、逻辑引擎3.26更新说明!
java·低代码·数据分析·团队开发·软件需求
xiaoyan20155 天前
vue3.5+deepseek+arco+markdown搭建web版流式输出AI模板
vue.js·vite·deepseek