搞懂vue配置中的process.env

不知道大家是否在项目中看到以.env开头的文件

其中一般会出现VUE_APP_BASE='http://xxxxxxxx的配置

并且在api文件中往往会有process.env.VUE_APP_BASE这样的引用出现

那么process.env 到底是神马

process.env初识

一般 process.env 都会伴随着项目的开发、生产、测试环境共同出现
process其实就是node.js中的全局环境变量,它其中包含了所有的有关当前node.js的进程信息
process.env包含用户自己配置的环境变量

项目中的环境变量

这里对vue项目中的环境变量做一个详解(每个系统的环境变量配置方式不同)

在项目构建成功到开始开发,项目的版本就存在着根本上的差异,一般分为三个环境即开发、测试、生产三个版本

那么在打包的时候如何正确区分三个环境

其实打开package.json可以形象的看到各个环境具体对应的打包文件

NODE_ENV默认是development(如果.env.development文件修改文件名那么需要在package.json文件中声明)

我这里的测试环境是staging

js 复制代码
"build:stage": "vue-cli-service build --mode staging",
// 注意build:stage构建的是测试包,build:prod构建的是生产包。 
// --mode staging 主意吧--mode后面跟的是你测试环境的环境变量

配置不同环境

  1. 在根目录下创建.env文件,我这里有三个文件,正常创建两个就够用了即.env.development.env.production,在开发环境调用的后端接口一般走的就是测试环境,所以这里开发环境和测试环境不分开叙述(我这里是这样,想分开也可以,如果有开发环境接口那就要分开,基本是后端给什么前端就用什么)

2..env.development为测试环境

js 复制代码
# 开发环境
ENV = 'development'
VUE_APP_BASE_API = 'http://xxxxxxxxx'
// 注意!!! 自定义环境命名一定要以 VUE_APP_ 开头,并且.env 文件会在所有的环境中被载入

3..env.production为生产环境

js 复制代码
ENV = 'development'
VUE_APP_BASE_API = 'https://xxxxxxxxx'
// 再次注意!!! 自定义环境命名一定要以 VUE_APP_ 开头,并且.env 文件会在所有的环境中被载入
// 并且在两个文件命名的时候一定要保持相同的接口,不同的环境变量的命名一定要一致 !!!

4.在package.json文件中添加后续配置

js 复制代码
"scripts": {
    "build:stage": "vue-cli-service build --mode development", //测试打包
    "build:prod": "vue-cli-service build --mode production",   //生产打包
},
//build:<name>,name是自定义的名称,打包具体走的环境取决于 --mode 后面跟的.env文件的后缀名

配置完毕就可以打印一下具体的环境配置项

js 复制代码
console.log(process.env, 'env')

ok文章到这里相信你已经能够初步掌握,那么下面就具体应用一下process.env

项目中的应用

日常开发中相信大家一定都封装过请求方法类,比如request请求,在其他模块中传递请求头、参数等等就可以发起http请求

抽离单独的api文件(这里已经封装过request,根据传入的不同的baseUrl来切换不同的url去请求不同的子系统接口)

js 复制代码
import request from '@/utils/request'
export function XXXXXX(data) {
    return request({
        url: '/api/XXX/XXX',
        method: 'POST',
        data,
        baseUrl: process.env.VUE_APP_BASE_API,
    })
}

最后再加一句

无论是测试环境的.env.development还是生产环境的.env.production在文件中配置ENV的时候都可将ENV配置为productionENV = 'production'这样可以获得 webpack 默认的打包优化

相关推荐
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
稻草人22221 天前
java Excel 导出 ,如何实现八倍效率优化,以及代码分层,方法封装
后端·架构
数据智能老司机1 天前
精通 Python 设计模式——创建型设计模式
python·设计模式·架构
数据智能老司机1 天前
精通 Python 设计模式——SOLID 原则
python·设计模式·架构
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
bobz9651 天前
k8s svc 实现的技术演化:iptables --> ipvs --> cilium
架构