Vue适配test环境变量从而判断开发,测试和生产环境

本文介绍了如何在Vue项目中利用process.env进行开发、测试和生产环境的判断与配置。通过dev.env.js, test.env.js, prod.env.js设置环境变量,结合webpack配置文件实现不同环境的打包。在组件中使用process.env.NODE_ENV判断当前环境,并展示了如何根据环境变量调整axios的baseURL。" 43016433,2789005,LeetCode 解题报告:文本对齐算法实现,"['算法', '字符串', 'LeetCode']
摘要由CSDN通过智能技术生成

VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL

通过process.env做判断和处理

1,找到项目配置文件夹:
config文件夹
2,进入如下三个文件:
dev.env.js 对应开发环境
test.env.js 对应测试环境
prod.env.js 对应生产环境
找到如下代码:

// 开发环境
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
})

// 测试环境
module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
})

// 生产环境
module.exports = {
  NODE_ENV: '"production"',
}

你的NODE_ENV字段值不一定跟我一样,但是这个标记就是环境标识,我现在组件里面打印一下结果,给大家看下:
mounted() {
console.log(process.env.NODE_ENV);
// 打印结果
// 开发环境‘development’
// 测试环境‘testing’
// 生产环境‘production’
}
如果你想在组件中分环境处理相关方法,可以像这样用:

if(process.env.NODE_ENV === 'development') {
	// 开发环境相关特殊方法
}
if(process.env.NODE_ENV ==
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值