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

最新推荐文章于 2024-01-26 11:12:16 发布

allen_csdns

最新推荐文章于 2024-01-26 11:12:16 发布

阅读量1.5k

点赞数 3

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/allen_csdns/article/details/104796236

版权

本文介绍了如何在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 ==

最低0.47元/天解锁文章