彻底搞懂前端环境变量使用和原理

前端初见2024-11-22 14:44

文章目录

🟢一、从使用到本质，项目前端环境变量体系

前端环境变量是指在前端项目开发、构建和部署过程中用于区分不同运行环境（如开发环境、测试环境、生产环境等）的一组配置值。这些变量通常包含一些关键信息，如API接口的URL、后端服务的地址、应用的密钥、日志级别等，这些信息在不同的环境中可能会有所不同。

👉1.以Vue为例。一般项目如何定义环境和环境变量

通常我们会写代码的时候可能会调用开发环境的地址，写好之后我们再把开发环境的地址手动替换成生产环境地址或正式环境地址，这样确实可以，但是我们要考虑一点我们在项目发版上线的时候忘记这一茬忘记替换了这个地址了，结果发布上去发现所有请求都发不出来，那这就造成了生产事故。代码都发在服务器上了才发现有问题，那就造成了生产事故，那么可能被骂了或者diss哈哈哈。所以我们能不能做到一个自动的切换呢。那么接下来我们就借着这个问题往下了解一下前端的环境变量。

1.1 环境变量用途
  • 开发环境
  • 生产环境
  • 测试环境
  • 预发环境

不同的环境需要做不同的处理，比如不同的环境不可以用一个服务器，开发环境请求的是公司局域网服务器-192.162.x.xxx，生产环境请求的是真正的服务器-112.23.x.xx。

1.2 常见的项目环境变量使用

总则-使用.env环境名字文件去定义，运行命令的时候指定环境

1.2.1 vite+vue3项目
存:VITE_变量名=xxx
bash 复制代码 
#vite创建项目
# npm 6.x
npm init vite@latest my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app -- --template vue



#安装依赖
cd 项目名称
npm install
npm run dev

使用vite脚手架创建一个项目，默认文件目录如下图所示。

创建完成后，我们在my-vue-app项目文件夹下创建三个环境变量文件.env(全部环境)、.env.development(开发环境)、.env.production(生产环境)

.env所有环境文件

bash 复制代码 
# 所有环境都生效，注意下面变量的值无论是字符串还是数字都不要加引号
VITE_GLOBAL=global

.env.development开发环境文件

bash 复制代码 
# 开发环境
VITE_BASE_URL=192.168.1.1

...env.production生产环境

bash 复制代码 
# 开发环境
VITE_BASE_URL=112.168.1.1
取:import.meta.env.VITE_变量名

main.js

js 复制代码 
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
console.log(import.meta.env) //取 打印一下
createApp(App).mount('#app')

我们启动一下项目本地服务(开发环境),可以看到我们定义的VITE_BASE_URL的值是192.168.1.1，也可以看到我们的全部变量VITE_GLOBAL的值

bash 复制代码 
cnpm run dev

我们打下包(生产环境)，然后打开dist包下面的index.html，使用live-serve运行一下可以看到我们定义的VITE_BASE_URL的值是112.168.1.1，也可以看到我们的全部变量VITE_GLOBAL的值

bash 复制代码 
 cnpm run build

对比一下

.env.tst 测试环境

下面我们看下项目文件夹下的package.json文件

json 复制代码 
{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.4",
    "vite": "^5.4.10"
  }
}

我们平时npm run dev我们相当于我们运行了vite这个指令，我们运行npm run dev会默认会把模式指定为development(开发环境)，然后我们可以通过更改

json 复制代码 
#修改前
    "dev": "vite",
#修改后  
    "dev": "vite --mode=test",

修改后我们在启动一下项目，可以看到我们的模式已经变成了test

但是我们不能直接覆盖掉dev的模式，所以我们在package.json创建一个自己的环境test,一般test是需要配打包的，但是为了方便我们调试，我就改成vite调试。

json 复制代码 
 "test":"vite --mode=test",

完整

json 复制代码 
{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "test":"vite --mode=test",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.12"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.4",
    "vite": "^5.4.10"
  }
}

接下来我们在my-vue-app项目文件夹下创建一个环境变量文件.env.test(测试环境)

...env.test测试环境文件

bash 复制代码 
# 测试环境
VITE_BASE_URL=180.168.1.1

修改后我们在启动一下项目跑我们的测试环境

bash 复制代码 
npm run test
1.2.2. vue-cli项目
存:VUE_APP_变量名=xxx
bash 复制代码 
#运行以下命令来创建一个新项目：
vue create hello-world

#安装依赖
cd hello-world
npm install
npm run serve

使用cli脚手架创建一个项目，默认文件目录如下图所示。

创建完成后，我们在hello-word项目文件夹下创建三个环境变量文件.env(全部环境)、.env.development(开发环境)、.env.production(生产环境)

.env所有环境文件

bash 复制代码 
# 所有环境都生效，注意下面变量的值无论是字符串还是数字都不要加引号
VUE_APP_ABE=1111

.env.development开发环境文件

bash 复制代码 
# 开发环境
VUE_APP_BASE_URL=192.168.1.1

...env.production生产环境

bash 复制代码 
# 生产环境
VUE_APP_BASE_URL=112.168.1.1
取:process.env.VUE_APP_变量名

main.js

js 复制代码 
import { createApp } from 'vue'
import App from './App.vue'

console.log(process.env) //取  打印一下
createApp(App).mount('#app')

我们启动一下项目本地服务(开发环境),可以看到我们定义的VUE_APP_BASE_URL的值是192.168.1.1，也可以看到我们的全部变量VUE_APP_ABE的值

bash 复制代码 
cnpm run serve

我们打下包(生产环境)，然后打开dist包下面的index.html，使用live-serve运行一下可以看到我们定义的VUE_APP_BASE_URL的值是112.168.1.1，也可以看到我们的全部变量VUE_APP_ABE的值

bash 复制代码 
 cnpm run build
.env.tst 测试环境

下面我们看下项目文件夹下的package.json文件

json 复制代码 
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

在package.json创建一个自己的环境test,一般test是需要配打包的，但是为了方便我们调试，我就改成vite调试。

json 复制代码 
   "test": "vue-cli-service serve --mode=test",

完整

json 复制代码 
{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode=test",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^3.2.13"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "not ie 11"
  ]
}

接下来我们在hello-world项目文件夹下创建一个环境变量文件.env.test(测试环境)

...env.test测试环境文件

bash 复制代码 
# 测试环境
VUE_APP_BASE_URL=180.168.1.1

修改后我们在启动一下项目跑我们的测试环境

bash 复制代码 
npm run test

✒️总结

在前端项目中，环境变量的使用有几个关键方面：

  1. 配置管理：通过环境变量，开发者可以轻松地管理不同环境中的配置信息，而无需修改代码。这有助于提高项目的可维护性和可扩展性。
  2. 安全性：虽然环境变量本身并不提供加密或保护敏感信息的功能，但通过将敏感信息（如API密钥）存储在环境变量中，并限制对这些变量的访问，可以在一定程度上提高安全性。然而，更安全的做法是使用专门的环境变量管理工具或加密存储服务来管理这些敏感信息。
  3. 构建和部署：在构建和部署前端项目时，环境变量可以用于控制构建过程的行为，如选择不同的构建配置、
  4. 化性能设置等。此外，环境变量还可以用于在部署时配置后端服务的地址和端口等信息。
    跨平台兼容性：环境变量是操作系统级别的特性，因此它们在不同的操作系统和平台上具有相似的行为。这使得前端项目可以更容易地在不同的环境中进行部署和运行。

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！

👨‍🔧 个人主页 : 前端初见

相关推荐
sg_knight几秒前
VSCode如何修改默认扩展路径和用户文件夹目录到D盘
前端·ide·vscode·编辑器·web
一个处女座的程序猿O(∩_∩)O10 分钟前
完成第一个 Vue3.2 项目后，这是我的技术总结
前端·vue.js
mubeibeinv11 分钟前
项目搭建+图片(添加+图片)
java·服务器·前端
逆旅行天涯17 分钟前
【Threejs】从零开始（六）--GUI调试开发3D效果
前端·javascript·3d
m0_7482552639 分钟前
easyExcel导出大数据量EXCEL文件，前端实现进度条或者遮罩层
前端·excel
web147862107231 小时前
C# .Net Web 路由相关配置
前端·c#·.net
m0_748247801 小时前
Flutter Intl包使用指南：实现国际化和本地化
前端·javascript·flutter
飞的肖1 小时前
前端使用 Element Plus架构vue3.0实现图片拖拉拽，后等比压缩，上传到Spring Boot后端
前端·spring boot·架构
青灯文案11 小时前
前端 HTTP 请求由 Nginx 反向代理和 API 网关到后端服务的流程
前端·nginx·http
m0_748254881 小时前
DataX3.0+DataX-Web部署分布式可视化ETL系统
前端·分布式·etl
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04解决java读取EXCEL数据变成科学计数法的问题05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问07DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明106个主流的工业3D管道设计软件