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

前端初见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感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！

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

相关推荐
loey_ln19 分钟前
webpack配置和打包性能优化
前端·webpack·性能优化
建群新人小猿20 分钟前
会员等级经验问题
android·开发语言·前端·javascript·php
爱上语文21 分钟前
HTML和CSS 表单、表格练习
前端·css·html
djk888831 分钟前
Layui Table 行号
前端·javascript·layui
NightCyberpunk1 小时前
HTML、CSS
前端·css·html
xcLeigh1 小时前
HTML5超酷响应式视频背景动画特效(六种风格，附源码)
前端·音视频·html5
zhenryx1 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
ZwaterZ1 小时前
el-table-column自动生成序号&&在序号前插入图标
前端·javascript·c#·vue
zhangjr05753 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06RAG 实践- Ollama+RagFlow 部署本地知识库0704 - matlab m_map地学绘图工具基础函数 - 设置网格08Unity中PICO实现 隔空取物 和 接触抓取物体09Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO10【目标跟踪】相机运动补偿