.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),
    },
  }
})
相关推荐
NoneCoder18 小时前
Java企业级开发系列(1)
java·开发语言·spring·团队开发·开发
guanpinkeji2 天前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
web3探路者2 天前
加密货币行业与2024年美国大选
java·大数据·web3·区块链·团队开发·开源软件
王小金Ryan3 天前
开发一个Vite插件,给所有DOM节点插入自定义属性
vue.js·vite
编程武士4 天前
写了个建表语句 review 的 prompt
sql·prompt·团队开发·设计规范
bh_0085 天前
如何开发一个摄影行业小程序?开发一个摄影行业小程序需要哪些功能?南昌各行业小程序开发
微信小程序·小程序·团队开发
前端霸王防脱发洗发水6 天前
Vite常用插件配置
javascript·vue.js·vite
guanpinkeji8 天前
废品回收小程序搭建,互联网回收行业的特点
小程序·团队开发·小程序开发·小程序制作·废品回收小程序
friend_ship8 天前
Vue3.0都有哪些新特性及优化点
vue.js·vite·vue3.0·es6新特性·proxy响应式对象
jason_yang8 天前
vue3复习-源码-迷你版vite
vue.js·vite