在项目根目录下建 .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. 牛客 40F 珂朵莉的约数 (莫队)

    珂朵莉给你一个长为n的序列,有m次查询 每次查询给两个数l,r 设s为区间[l,r]内所有数的乘积 求s的约数个数mod 1000000007 直接莫队暴力维护复杂度是$O(8m\sqrt{m})$. ...

  2. Eclipse错误提示: Symbol 'xxxx' could not be resolved

    在eclipse中安装maven(网上资源):https://zhinan.sogou.com/guide/detail/?id=1610049267 项目名 右键->configure-> ...

  3. js页面加载时候的调用函数的方法

    方法一:jquery 中:$(function(){}) 括号内写你的内容 方法二:html <body onload=''> <script type="text/jav ...

  4. HttpClient的GET请求（post）请求

    一.不带参数的GET请求 // 创建Httpclient对象 CloseableHttpClient httpclient = HttpClients.createDefault(); // 创建ht ...

  5. 巧用Map缓存提升"翻译"速度

    在业务编码中,很多情况都需要用到code2Name或者id2Name之间的"翻译",在我的过往经历中发现不少开发人员都是直接双重循环实现这种"翻译".如果一次& ...

  6. List<int>转化为逗号链接的字符串

    /// <summary> /// List<int>转化为逗号链接的字符串 /// </summary> /// <param name="lis ...

  7. export命令用来设置环境变量。

    sh-# export export CONSOLE="/dev/console" export HOME="/" export LD_LIBRARY_PATH ...

  8. centos 7 安装 LNMPC cacti 1.2.7 监控

    先上图,后续更新

  9. Manjaro18+kde 更换壁纸重启失效

    更换壁纸 ​ 在kde的桌面右键->配置桌面 壁纸里更换壁纸,我不能直接添加图像并应用.我的系统在这样操作后重启就会发现一切都被重置了.刚刚添加的图片也不见了. ​ 于是,我就模范原本存在壁纸文 ...

  10. JDBC模拟登陆及SQL语句防注入问题

    实现模拟登陆效果:基于表Tencent package boom; import java.sql.Connection; import java.sql.DriverManager; import ...