快捷導(dǎo)航

前端項(xiàng)目中.env文件的原理和實(shí)現(xiàn)方法代碼

更新時(shí)間：2026年03月11日 10:30:07 作者：庚云

這篇文章主要介紹了前端項(xiàng)目中.env文件原理和實(shí)現(xiàn)方法的相關(guān)資料 ,.env文件是一種常見的方法,用來存儲(chǔ)項(xiàng)目的環(huán)境變量和敏感信息,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

為什么要用 .env？

在前端開發(fā)中，我們經(jīng)常需要區(qū)分不同環(huán)境下的配置，比如：

開發(fā)環(huán)境（開發(fā)調(diào)試用的 API 地址、本地調(diào)試開關(guān)）；
測試環(huán)境（給測試同學(xué)用的接口域名、測試賬號）；
生產(chǎn)環(huán)境（線上穩(wěn)定接口、CDN 域名、是否啟用 mock 數(shù)據(jù)等）。

如果把這些配置直接寫死在代碼里，不僅管理麻煩，還容易出現(xiàn)「改配置 → 重新打包 → 發(fā)錯(cuò)環(huán)境」的坑。

這時(shí)候 .env 文件就派上用場了。

?? 它能把不同環(huán)境的變量抽離出來，統(tǒng)一放在一個(gè)文件里，通過工具在打包或運(yùn)行時(shí)注入到代碼中，大大提升了項(xiàng)目的可維護(hù)性。

環(huán)境準(zhǔn)備

我們先來簡單準(zhǔn)備下環(huán)境。

如果想直接看 dotenv 的源碼，可以克隆官方項(xiàng)目：

git clone https://github.com/motdotla/dotenv.git
# cd dotenv && yarn i
# VSCode 打開當(dāng)前項(xiàng)目
code .

dotenv 的作用

官方項(xiàng)目地址：

?? github.com/motdotla/do…

dotenv 是一個(gè)零依賴模塊，用來把 .env 文件中的環(huán)境變量加載到 process.env 中。
如果需要進(jìn)一步使用變量展開，還可以配合 dotenv-expand 一起使用。

在前端項(xiàng)目里，.env 文件非常常見，比如 vue-cli 和 create-react-app 都支持它。

.env 文件寫法示例

NAME=gengyun
AGE=18
VITE_APP_ENV=production
VITE_ROUTER_BASE_URL=/ai-form
VITE_APP_PRO_USE_MOCK=true

從上面這個(gè) .env 文件就能看出來，.env 的主要用途就是：

讀取 .env 文件；
解析成 key=value 形式的對象；
掛載到 process.env 上；
最后返回解析好的對象，方便使用。

一個(gè)簡易版實(shí)現(xiàn)

下面寫一個(gè)簡單的實(shí)現(xiàn)，核心就是 用 Node.js 讀取文件，解析成對象，然后賦值給 process.env。

const fs = require('fs');
const path = require('path');

const parse = function (src) {
  const obj = {};
  src.toString().split('\n').forEach(function (line) {
    const keyValueArr = line.split('=');
    const key = keyValueArr[0];
    const val = keyValueArr[1] || '';
    obj[key] = val;
  });
  return obj;
}

const config = function () {
  const dotenvPath = path.resolve(process.cwd(), '.env');
  const parsed = parse(fs.readFileSync(dotenvPath, 'utf-8'));

  Object.keys(parsed).forEach(function (key) {
    if (!Object.prototype.hasOwnProperty.call(process.env, key)) {
      process.env[key] = parsed[key];
    }
  });

  return parsed;
};

console.log(config());
console.log(process.env);

module.exports.config = config;
module.exports.parse = parse;

雖然能用，但這個(gè) config 函數(shù)還很簡陋，缺少一些常見功能，比如：

支持用戶自定義 .env 文件路徑；
支持自定義編碼；
添加 debug 模式，方便輸出提示；
更友好的報(bào)錯(cuò)信息（畢竟 .env 文件寫法很隨意）。

升級版實(shí)現(xiàn)

官方的 dotenv 庫在源碼里對這些功能做了處理，比如路徑解析、編碼設(shè)置、調(diào)試日志等。我們也可以稍微擴(kuò)展一下：

const fs = require('fs');
const os = require('os');
const path = require('path');

function resolveHome(envPath) {
  return envPath[0] === '~' ? path.join(os.homedir(), envPath.slice(1)) : envPath;
}

const config = function (options) {
  let dotenvPath = path.resolve(process.cwd(), '.env');
  let encoding = 'utf8';
  let debug = false;

  if (options) {
    if (options.path != null) {
      dotenvPath = resolveHome(options.path);
    }
    if (options.encoding != null) {
      encoding = options.encoding;
    }
    if (options.debug != null) {
      debug = true;
    }
  }

  try {
    const parsed = parse(fs.readFileSync(dotenvPath, { encoding }), { debug });

    Object.keys(parsed).forEach(function (key) {
      if (!Object.prototype.hasOwnProperty.call(process.env, key)) {
        process.env[key] = parsed[key];
      } else if (debug) {
        console.log(`"${key}" is already defined in process.env and will not be overwritten`);
      }
    });

    return parsed;
  } catch (e) {
    return { error: e };
  }
};

而 dotenv 官方的 parse 函數(shù)還處理了更多細(xì)節(jié)，比如：