搞懂vue配置中的process.env

2024-01-12 2,294 阅读3分钟

不知道大家是否在项目中看到以.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可以形象的看到各个环境具体对应的打包文件

配置文件01.png
NODE_ENV默认是development（如果.env.development文件修改文件名那么需要在package.json文件中声明）
我这里的测试环境是staging

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

配置不同环境

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

配置文件02.png

2..env.development为测试环境

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

3..env.production为生产环境

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

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

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

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

console.log(process.env, 'env')

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

项目中的应用

日常开发中相信大家一定都封装过请求方法类，比如request请求，在其他模块中传递请求头、参数等等就可以发起http请求
抽离单独的api文件(这里已经封装过request，根据传入的不同的baseUrl来切换不同的url去请求不同的子系统接口)

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配置为production即ENV = 'production'这样可以获得 webpack 默认的打包优化