温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~

------------------正文开始------------------

开发项目时,经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢?

为了更加方便消化本文章,建议先看下官方文档:

环境变量和模式

看完官方的文档如果还没有明白,可以参考本文。

在vue-cli 构建的项目中,默认有3种模式,如下图:

我个人的理解就是:

你执行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的配置如下图:

总而言之就是,你需要哪个环境变量,就 【npm run 对应的环境变量】 就完事了!

关于vue cli4.0 配置环境变量就讲到这里了~~如果有更好的建议或者疑问,欢迎留言~

vue cli4.0 配置环境变量的更多相关文章

  1. window 远程在Linux(centOS7.0)上安装JDK以及配置环境变量

    本人是在windows 7 上安装了虚拟机,虚拟机安装的是linux(centOS7.0)系统现在在Windows 上安装SecureCRT 远程虚拟机的linux系统,安装JDK以及配置环境变量. ...

  2. Linux CentOS7.0下JAVA安装和配置环境变量

    一.前言: CentOS7.0虽然自带JDK1.7和1.8,运行“java -version”命令也可以看到版本信息,但是jdk的安装环境不全,比如缺少tool.jar和dt.jar等,这就导致“ja ...

  3. JDK9.0.4环境变量配置

    电脑不知道怎么就崩溃了...重置了一下,啥都没了 所有都得重新配置 wnm系列之jdk安装与配置 jdk下载,选择windows版本 http://www.oracle.com/technetwork ...

  4. MySQL 8.0安装 + 配置环境变量 + 连接 cmd

    MySQL 安装教程 搜索 MySQL,进入官网,找到 download 点击适用于 window community 版本,点击图中第二个 450.7 M 的安装包进行下载 这里有五个选项,选择第二 ...

  5. Linux系统下配置环境变量

    一.环境变量文件介绍 转自:http://blog.csdn.net/cscmaker/article/details/7261921 Linux中环境变量包括系统级和用户级,系统级的环境变量是每个登 ...

  6. Java JDK配置环境变量

    JDK的配置环境变量. 1.下载JDK,然后安装(点下一步). 2.右键单击  "计算机" ,选择  "属性".   3.单击 "高级系统设置&quo ...

  7. Tomcat如何配置环境变量

    1, JDK:版本为jdk-7-windows-i586.exe 下载地址: http://www.oracle.com/technetwork/java/javase/downloads/index ...

  8. JAVA为什么要配置环境变量,怎样配置

    自己总结些再加抄点:安装JDK后要配置环境变量,主要有三个:1 JAVA_HOME ->为JDK的安装目录,如:F:\JAVA\jdk1.6.0_042 CLASSPATH ->到哪里找需 ...

  9. JAVA基础学习之命令行方式、配置环境变量、进制的基本转换、排序法、JAVA文档生成等(1)

    1.命令行方式 dos命令行,常见的命令: dir:列出当前目录下的文件以及文件夹 md:创建目录 rd:删除目录 cd:进入指定目录 cd..:退回到上一级目录 cd/:退回到根目录 del:删除文 ...

随机推荐

  1. Java利用IText导出PDF(更新)

    我很久以前写的还是上大学的时候写的:https://www.cnblogs.com/LUA123/p/5108007.html ,今天心血来潮决定更新一波. 看了下官网(https://itextpd ...

  2. Docker安装mysql、nginx、redis、tomcat

    拉取mysql 5.7官方镜像 docker pull mysql:5.7 启动容器 docker run --name mysql5.7 -p 3306:3306 -e MYSQL_ROOT_PAS ...

  3. 第十四节:Asp.Net Core 中的跨域解决方案(Cors、jsonp改造、chrome配置)

    一. 整体说明 1. 说在前面的话 早在前面的章节中,就详细介绍了.Net FrameWork版本下MVC和WebApi的跨域解决方案,详见:https://www.cnblogs.com/yaope ...

  4. 不一样的LCA——luoguP1852跳跳棋

    洛谷端题目链接 loj端题目链接 题目大意: 在一条数轴上进行跳跳棋游戏.棋子只能摆在整点上.每个点不能摆超过一个棋子.用跳跳棋完成:棋盘上有3颗棋子,分别在a,b,c这三个位置.我们要通过最少的跳动 ...

  5. BussinessSkinForm 入门教程

    BussinessSkinForm 入门教程 By 刘家君(qufo) 作者:刘家君 工作单位:福建省 泉州鹭燕医药有限公司 职务:网络管理员 网名:qufo Mail:qufo@tom.com,qu ...

  6. 300iq Contest 1 简要题解

    300iq Contest 1 简要题解 咕咕咕 codeforces A. Angle Beats description 有一张\(n\times m\)的方阵,每个位置上标有*,+,.中的一种. ...

  7. 1.0EnterpriseFrameWork 框架学习

    1.先报其主页 :博主的框架是开源的 http://www.cnblogs.com/kakake/p/3938262.html . 2.学习的精髓是:该框架支持 ORM.SQL语句 和 存储过程 ,O ...

  8. 服务网格Istio初探

    1. 服务网格Istio初探 1.1. 什么是Istio 它是一个完全开源的服务网格.什么是服务网格? 这个术语通常用于描述构成这些应用程序的微服务网络以及应用之间的交互.随着规模和复杂性的增长,服务 ...

  9. promiseall的使用场景

    在上图中点击诊断后下方的图标会一次进行数据请求,根据请求回来的数据显示正常异常,在请求数据完成期间再次点击诊断不触发事件 let p1 = new Promise((resolve, reject) ...

  10. elementUI的导航栏在刷新页面的时候选中状态消失的解决

    首先elementUI的导航栏中的选中项的高亮显示时的字体颜色可以在属性中设置,但是高亮时的背景颜色不能设置,所以要自己修改高亮的背景颜色 .el-menu-item.is-active { back ...