在项目根目录下建 .env 文件,环境变量无论运行何种模式均可获取其设置值。

vue 中主要有三种模式: development、test、production,在 package.json 中目前三种配置:

"serve": "vue-cli-service serve", //对应 development 模式
"build": "vue-cli-service build", //对应 production 模式
"lint": "vue-cli-service lint" // 对应 eslint 规范检测

新建自己的模式注意注意的创建文件以 .env 开头后面书写自己想要要的, 如创建 .env.newplayer 文件,内容必须为 VUE_APP_ 开头

VUE_APP_TEST = TEST
VUE_APP_PLAYER = PLAYER

但是在 package.json 中新配置运行如下:

"serve:newplayer": "vue-cli-service serve --mode newplayer",

在项目中获取环境配置就可使用:

console.log(process.env.VUE_APP_PLAYER)

在线 DEMO

参考:

0. 主要参考

  1. vuec-li3 环境变量配置
  2. vue-cli3.0 环境变量与模式
  3. vue-cli3 .env.development和.env.production环境变量配置

vue-cli 4.0.5 配置环境变量样例的更多相关文章

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

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

  2. java10.0.2和java 11.0.1配置环境变量

    java10.0.2 在网上找了各种方法一直也没配好打开jak下的lib文件夹发现并没有tools.jar,后经查询jdk-9后就没有了上述.jar文件所以我的配置方法如下 ClASSPATH C:\ ...

  3. Jmeter命令行运行配置环境变量

    Jmeter命令行运行配置环境变量 在打开jmeter GUI界面时会弹出cmd命令窗口提示:压测时不要用GUI,要用命令行 在cmd命令行里面运行jmeter的话,需要配置jmeter环境变量,下面 ...

  4. vue cli4.0 配置环境变量

    温馨提示:本文只适用于vue-cli 3.0 及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配 ...

  5. Maven3.0.3的环境变量配置

    Maven3.0.3的环境变量配置 //该配置经过实际验证已经可以使用.验证的环境maven3.0.3(官网的目前最新版)1 windows maven3的安装 标签: #maven |  发布时间: ...

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

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

  7. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

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

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

  9. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

随机推荐

  1. Git 学习笔记之(三)将本地工程导入到GitHub 仓库中

    一:操作步骤第一步:建立git仓库 cd到你的本地项目根目录下,执行git命令,此命令会在当前目录下创建一个.git文件夹. git init 第二步:将项目的所有文件添加到仓库中 git add . ...

  2. Windows Class Styles

    CS_VREDRAW:当窗口水平方向的宽度变化时重绘整个窗口 CS_HREDRAW:当窗口垂直方向的宽度变化时重绘整个窗口 CS_DBLCLKS:指针在属于此类的窗体内部,并且用户双击时,收到一个双击 ...

  3. JavaScript笔记(4)

    3.JavaScript事件 定义 1.事件是JavaScript事先定义好的 2.JavaScript中事件大多都是以"on--"开头的 3.事件由三要素组成:事件源.事件名.事 ...

  4. JS中数组与对象的遍历方法实例小结

    一.数组的遍历: 首先定义一个数组 1 arr=['snow','bran','king','nightking']; 1.for循环,需要知道数组的长度; 2.foreach,没有返回值,可以不知道 ...

  5. element-ui中点击菜单,改变当前菜单背景颜色

    需求: vue项目中,点击左侧菜单,tags页显示当前打开的菜单,并且高亮显示当前菜单 实现效果: 实现代码:在vuex里面定义tags存放所有打开的菜单,和当前打开的索引curtagsIndex:, ...

  6. 乐观锁之版本号机制和CAS

    ---恢复内容开始--- 乐观锁:每次去拿数据的时候,都认为别人不会修改,不会加锁,但在更新的时候会去判断一下,此期间别人有没有更新数据,版本号机制和CAS算法就用到乐观锁,参考了https://bl ...

  7. Linux下MySql基本操作命令

    (1).切换至MySql目录下[假设MySql安装路径为:/home/mysql/bin] cd /home/mysql/bin (2).连接MySql mysql -u用户名 -p,回车后输入密码 ...

  8. 8.2.ZooKeeper应用场景

    7.ZooKeeper应用举例 为了方便大家理解ZooKeeper,在此就给大家举个例子,看看ZooKeeper是如何实现的他的服务的,我以ZooKeeper提供的基本服务分布式锁为例. 7.1 分布 ...

  9. LNMP安装与配置之MySQL

    MySQL 是最流行的关系型数据库管理系统之一,今天的安装是在CentOS7环境下进行安装,安装的版本是MySQL5.7,有需要别的版本可点击  官网. 一.安装 1.配置YUM源 # 下载mysql ...

  10. Introduction to Restricted Boltzmann Machines

    转载,原贴地址:Introduction to Restricted Boltzmann Machines,by Edwin Chen, 2011/07/18. Suppose you ask a b ...