.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),
    },
  }
})
相关推荐
景天科技苑20 小时前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
web3探路者1 天前
深入探索Solana链上的Meme生态:创新、潜力与挑战#区块链开发#dapp开发
web3·区块链·团队开发·dapp开发·区块链技术·链游开发·交易所开发
niech_cn3 天前
vite + vue3 + ts解决别名引用@/api/user报错找不到相应的模块
vite
guanpinkeji4 天前
剧本杀门店预约小程序,解锁沉浸式推理体验
大数据·小程序·团队开发·软件开发·预约小程序·剧本杀门店预约系统
Amd7945 天前
Nuxt.js 应用中的 vite:compiled 事件钩子
自定义·vite·编译·nuxt·热更新·性能·钩子
黑色的糖果5 天前
npm上传自己封装的插件(vue+vite)
前端·vue.js·npm·vite
软件小伟5 天前
Vite是什么?Vite如何使用?相比于Vue CLI的区别是什么?(一篇文章帮你搞定!)
前端·vue.js·ecmascript·vite·vue vli
Amd7946 天前
Nuxt.js 应用中的 vite:serverCreated 事件钩子
中间件·开发·vite·日志·nuxt·跨域·钩子
亦世凡华、6 天前
React--》如何高效管理前端环境变量:开发与生产环境配置详解
react·vite·环境变量·env·env配置
19组清风6 天前
对于模块动态加载,Vite 内部做了哪些优化
前端·vite·前端工程化