在项目根目录下建 .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. Java 线程控制

    一.线程控制 和线程相关的操作都定义在Thread类中,但在运行时可以获得线程执行环境的信息.比如查看可用的处理器数目(这也行?): public class RunTimeTest { public ...

  2. mybatis sql语句中 in() 长度为0或null的情况

    mybatis sql语句中 in() 长度为0或null的情况 比如: select * from A where colName IN <foreach collection="m ...

  3. python3中SYS模块

    sys.argv               命令行参数List,第一个元素是程序本身路径sys.modules        返回系统导入的模块字段,key是模块名,value是模块sys.exit ...

  4. JavaWeb【三、Web程序编写】

    步骤 1.在WebApps创建项目目录,如myapp文件夹 2.编写index.jsp,若路径后不加具体文件名,则默认访问index 3.创建WEB-INF目录,并在其中添加classes.lib文件 ...

  5. 6.JVM技术_java内存模型

    1.java内存模型图解 Java虚拟机在执行Java程序的过程中,会把它所管理的内存划分为若干个不同的数据区.这些区域有各自的用途,以及创建和销毁的 时间,有的区域随着虚拟机进程的启动而存在,有的区 ...

  6. 2.NumPy简介

    一:NumPy简介 • 官网链接:http://www.numpy.org/ • NumPy教程链接:https://www.yiibai.com/numpy/ • NumPy是Python语言的一个 ...

  7. angular打印功能实现方式

    目前主流的前端打印方式有两种:一种是使用浏览器打印功能直接打印页面,另一种是调用本地控件实现.浏览器打印功能单一,不适用于复杂的业务表单,而打印控件可以设计打印模板,实现复杂表单的打印,十分适合复杂的 ...

  8. java8学习之Function与BiFunction函数式接口详解

    Function接口: 上次中已经使用了Function的apply()方法,但是在这个接口中还存在三个具体实现的方法,如下: 下面来仔细的将剩下的方法学习一下: compose(): 首先来读一下该 ...

  9. Numpy 文件读写

    NumPy 文件读写主要有二进制的文件读写和文件列表形式的数据读写两种形式 二进制的文件读写 save  np.save ("./文件名", 数组名):以二进制的格式保存数据 保存 ...

  10. 第八章 watch监听 83 名称案例-使用watch监听文本框数据的变化

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...