前端环境变量使用和原理

刀刀

4/8/2025

0 字

0 分钟

学习明灯
• UP主：三十的前端课，视频地址：前往学习

核心内容

1. 以 Vue 为例，一般项目如何定义环境和环境变量
2. 环境变量本质

环境变量用途

首先先明确环境变量的用途。环境主要分为开发环境、生产环境、测试环境、预发环境等等，不同的环境需要做不同的处理。如：接口服务器地址等。

手动切换自然可以，但是容易忘记切换导致生产事故的发生，因此使用环境变量能更好的避免生产事故的发生。

环境变量使用

使用环境变量，需要先定义好 .env.环境名称 文件去定义，运行命令时指定环境。每个脚手架创建的项目均有差异。

• Vite + Vue3 项目

  存：VITE_变量名 = xxx

  取：import.meta.env.VITE_变量名

• vue-cli 项目（Webpack + Vue2）

  存：VUE_APP_变量名 = xxx

  取：process.env.VUE_APP_变量名

• 纯粹 Webpack 打包

  存：通过 definePlugins 自己定义到全局环境

声明环境变量时，需要注意以下几点：

1. .env 文件是保底文件，所有环境都生效；.env.development 文件是开发环境的文件；.env.production 是生产环境的文件；.env.test 是测试环境的文件
2. 在 .env 文件中声明环境变量时，无论是数值型还是字符串型，均不需要添加引号

在 package.json 文件通过在命令后面添加 --mode= 可以覆盖替换模式。

{
  "script": {
    "dev": "vite", // 开发模式
    "test": "vite --mode=test", // 测试模式
    "build": "vite build", // 生产环境打包
  }
}

如果是 打包它本身是无法读取环境变量的，需要下载 cross-env 第三方库去指定。如果想获取到 .env 文件内的内容，需要引入 dotenv 。