vue项目中配置测试环境的环境变量,以及清除控制台打印

75 阅读1分钟

在开发项目过程中,我们可能要配置项目的环境变量:开发环境(development),生产模式(production),以及测试环境(test)。 而在不同的环境,我们在项目中做的操作也不尽相同 例如:在生产环境中,我们可以让所有的控制台打印都失效:
1.在根路径下创建 .env.production文件

image.png

在其中输入以下代码:

image.png 当我们执行 yarn build 进入打包生产流程时,会先执行该配置文件, 然后我们在main.js中,输入以下代码,调用该环境变量,NODE_ENV判断是进入到生产模式,让后清除控制台打印
// 把生产环境中的控制台打印清空掉 if (process.env.NODE_ENV !== 'development') { console.log = function () {} console.error = function () {} console.dir = function () {} }

同理当我们进入测试环境要更改项目接口地址时,也可以在.env.test文件中设置基地址:# base url VUE_APP_BASE_URL= '/test'

在其他环境配置文件中也设置该环境变量,并且在package.joson文件中配置相关指令当执行yarn test时,就会进入到.env.test文件中取出其中的环境变量,也就是我们存储的基地址,就能实现,在不同环境中配置不同的请求基地址, 当然封装请求时我们就不能把基地址写死了,而是要调用环境变量了

image.png image.png