打包build加参数,例如npm run build -- test、process.env便捷拼接口名

当我们再写项目的时候,有时候拿到接口返回的图片路径并没有给我们拼上域名,如果我们在页面重复写域名的话,后面变换域名的时候就回很麻烦,这时候我们可以用process.env来做路径前面的域名

这时候我们需要简单的介绍一下process.env是什么东西:
vue-cli建立完项目时会有个config包
在这里插入图片描述
也就是这个东西,这里的dev.env.js就是我们平时跑项目时使用的,也就是npm run dev的时候,prod.env.js就是我们打包时候使用的,也就是npm run build的时候。

简单的介绍之后进入主题
在这里插入图片描述
我们可以在js里设置一个变量,在页面调用时
在这里插入图片描述
前面就是我们在dev.env.js所配置的变量了,当我们打包的时候用的参数可以是prod.env.js里的设置的变量
在这里插入图片描述
我们在使用axios的时候也可以使用这个方法,也就是设置axios的baseURL
在这里插入图片描述
这样我们在项目中修改接口域名的时候就会很方便了

在项目上线部署的时候有时会有测试环境和正式环境,打包的时候可以通过npm run build – test 和 npm run build – prod 区分我们接口访问的地址

这时我们可以在prod.env.js 加个参数
let HOST = process.argv.splice(2)[0] || ‘prod’;
module.exports = {
NODE_ENV: ‘“production”’,
HOST: ‘"’+HOST+’"’
}
这样host就可以拿到我们后面的参数,这是在axios里获取就可以了
if(process.env.HOST == ‘test’){
axios.defaults.baseURL = ‘测试环境’;
}else if(process.env.HOST == ‘prod’){
axios.defaults.baseURL = ‘正式环境’;
}

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值