vue cli4.0 配置环境变量

在这里插入图片描述
我个人的理解就是:

你执行npm run serve时,对应的环境就是开发环境;

你执行npm run build时,对应的环境就是生产环境。

如果你开发的项目中,不止该3种,该咋整呢?像在我开发的项目中,就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。
1.创建不同环境变量文件
在这里插入图片描述
如官方文档所说,通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境,所以配置了5个.env文件。如下图:
在这里插入图片描述
2.给.env文件添加内容
基本格式如下:

NODE_ENV=环境名称
VUE_APP_URL=对应的环境地址

如我本地环境的配置就如下图所示:
在这里插入图片描述
我本地是用的easy-mock模拟的数据,所以配置的地址是mock接口地址。
3.在package.json中添加不同环境对应的执行语句
在这里插入图片描述
如官方文档所说,可以通过传递 --mode 来配置不同的模式。我自己的项目配置如下图:
在这里插入图片描述
请注意我配置文件中的 serve 与 build 。
4.使用
文件已创建好,配置语句也已写好。怎么用它呢?

首页你需要哪个环境,就执行哪个环境的命令语句。

比如我现在需要local环境,就执行 npm run local-serve 。如下图所示:
在这里插入图片描述
然后通过 process.env.NODE_ENV 获取环境名;通过 process.env.VUE_APP_URL 获取环境对应的url。

比如我们在axios请求中,就可以把它的baseURL设置为 process.env.VUE_APP_URL ,如下图所示:
在这里插入图片描述
后面的"/web"是根据我自己接口来的,你别也写个"/web"。

如果你不确定你自己现在是在哪个环境变量下,可以 console.log(“当前环境变量:”+process.env.NODE_ENV) 和 console.log(“当前环境路径:”+process.env.VUE_APP_URL) 看下。

像我的项目中就是下面这2个东东:
在这里插入图片描述
输出的内容就是.env.local文件里面配置的环境变量。

为了更好的理解,我们再执行一条语句, npm run serve ,看看此时的环境变量是哪个?
在这里插入图片描述
为什么呢?

因为 npm run serve 默认指向.env.developement,我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图:
在这里插入图片描述

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值