搞懂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 默认的打包优化

相关推荐
一水鉴天17 小时前
整体设计 之 绪 思维导图引擎 之 引 认知系统 之 序 认知元架构 从 三种机器 和 PropertyType 到认知 金字塔 之2(豆包助手)
架构·认知科学
知识分享小能手19 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军20 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy20 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端20 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿20 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉20 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~20 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
程思扬21 小时前
利用JSONCrack与cpolar提升数据可视化及跨团队协作效率
网络·人工智能·经验分享·docker·信息可视化·容器·架构
从零开始学习人工智能21 小时前
快速搭建B/S架构HTML演示页:从工具选择到实战落地
前端·架构·html