vue中关于:process.env.env配置全局变量 DEV UAT PROD

自己要重新搭建项目的时候,想把请求基础地址等信息做个全局管理,所以梳理一下process.env的使用。

1.env全局变量讲解

.env 全局默认配置文件,不论什么环境都会加载合并
1 .env.development :开发环境下的配置文件。
2 .env.production :生产环境下的配置文件。
3 .env:全局属性的配置文件。
注意以上文件:使用vue-cli搭建项目,默认会在根目录创建一个.env文件,如果需要更多类型的.env文件,需要自行创建。根据启动命令vue会自动加载对应的环境,vue是根据文件名进行加载的。所以说不要乱起名,也无需专门控制加载哪个文件,定义全局变量必须以VUE_APP开头
在这里插入图片描述
package.json文件中的scripts项是配置启动命令的
下图第四行npm run build 生产环境打包,其中.env和.env.production文件会加载

2.关于dev,prod,uat等缩写解释

在这里插入图片描述

DEV Development 研发环境
PRD/PROD Production 正式/生产环境

SIT System Integrate Test 系统集成测试环境(内测)
UAT User Acceptance Test 用户验收测试环境
PET Performance Evaluation Test 性能评估测试环境(压测)
SIM Simulation 高仿真环境
PRD/PROD Production 正式/生产环境*

3.具体使用

比如在vue-cli创建的项目中,config/dev.env.js文件中,配置开发环境的配置信息,比如设置请求的基础路径baseUrl,我们可以先判断当前所处的环境,然后设置不同的路径,判断环境可以用process.argv(下面有讲解)。大概操作如下:
dev.env.js文件:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

let params = process.argv[4]
let baseUrl = ''
switch (params) {
    case '--env=prod':
      baseUrl = '"production api"'
      break
    default:
      baseUrl = '"Loaclhost api"'
}

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASEURL : baseUrl
})

process.argv 属性返回一个数组,这个数组包含了启动Node.js进程时的命令行参数,
其中:
数组的第一个元素process.argv[0]——返回启动Node.js进程的可执行文件所在的绝对路径
第二个元素process.argv[1]——为当前执行的JavaScript文件路径
剩余的元素为其他命令行参数

例如:
输入命令:node scripts/build.js “web-runtime-cjs,web-server-renderer”
结果:

console.log(process.argv[0])   // 打印 D:\nodeJs\node.exe
console.log(process.argv[1])   // 打印 E:\Study_document\vue-resource\vue-dev\scripts\build.js
console.log(process.argv[2])   // 打印 web-runtime-cjs,web-server-renderer

俺也没咋配置过这个,所以哪里没理解对,还望指出~~~

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端阿彬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值