官方文档是这样写的:

src同名文件夹下的建立

.env.[model] 配置文件  // mode:production development ...

载入的变量会对vue-cli-service的所有命令、插件和依赖可用

https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

想一下里面实现的原理,应该是这样的:

1.设定好的key value值首先会被webpack构建进程 安置,在webpack构建时直接就可以拿到process.env.拿到,

2.文档又说,如果是以VUE_APP_开头的变量会被webpack.definePlugin放到客户端中,在代码中使用process.env.xx就可以拿到

即在编译过程中进行define字符串替换

内部实现应该是将process.env.VUE_APP_xxx 替换为 相应的值

vue-cli3 中的环境变量的更多相关文章

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

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

  2. Xcode 8:在 Active Compilation Conditions 中自定义环境变量

    来源:没故事的卓同学 链接:http://www.jianshu.com/p/96b36360bb2d 在Xcode 7我们在 OTHER_SWIFT_FLAGS中配置环境变量.但是有一个不爽的地方就 ...

  3. bootargs中的环境变量说明和一些常用的uboot命令

    bootargs中的环境变量说明和一些常用的uboot命令 一些常见的uboot命令:Help [command]在屏幕上打印命令的说明Boom [addr]启动在内存储器的内核Tftpboot通过t ...

  4. python 程序中设置环境变量

    python 中调用系统命令有三种方法: 1.os.system('command') ,这个方法是直接调用标准C的system() 函数,仅仅在一个子终端运行系统命令,而不能获取命令执行后的返回信息 ...

  5. 关于Lumen / Laravel .env 文件中的环境变量是如何生效的

    .env 文件包含默认环境变量,我们还可自定义其他任何有效的变量,并可通过  调用 env() 或 $_SERVER 或 $_ENV  来获取该变量.那么env()是如何加载到这些变量的呢?在Lume ...

  6. 怎样在Ubuntu中设置环境变量

    首先启动终端. 单击屏幕左上角的Ubuntu图标,在弹出的窗口中点击搜索栏,输入"terminal", 稍等片刻,终端就会赫然在目!二话不说,直接点击!     然后打开环境设置文 ...

  7. 解析docker中的环境变量使用和常见问题解决

    docker容器中的环境变量 docker可以为容器配置环境变量.配置的途径有两种: 在制作镜像时,通过ENV命令为镜像增加环境变量.在容器启动时使用该环境变量. 在容器启动时候,通过参数配置环境变量 ...

  8. 在PHP中管理环境变量

    在PHP中管理环境变量 现在我们都能用很多个编程语言开发,当我开始熟悉PHP时,我会忽略其它语言的特点.我用过其他语言(比如Node.js),但在PHP中没有看到一种轻松控制设置环境变量的方法,特别是 ...

  9. 深入理解Java中配置环境变量

    深入理解Java中配置环境变量 配置的目的: 本来只在安装JDK的bin目下能运行java.exe,javac.exe,jar.exe,javadoc.exe等Java开发工具包命令,我们现在想让在所 ...

  10. 在python脚本中设置环境变量,并运行相关应用

    1. 问题 在自动化应用的时候 ,有时候环境变量与运行需要不一致.这时候有两种选择: 改变节点环境变量,使得其和运行需求保持一致: 在自动化脚本中设置环境变量,其范围只在脚本运行环境中有效. 显然,当 ...

随机推荐

  1. ITK Configuring and Building in VisualStudio及hello world程序编译

    1. ITK Configuring and Building in VisualStudio With Visual Studio 2010 on Windows 7 (32-bit): Launc ...

  2. B. Case of Fake Numbers( Codeforces Round #310 (Div. 2) 简单题)

    B. Case of Fake Numbers time limit per test 2 seconds memory limit per test 256 megabytes input stan ...

  3. torch lua tips

    1.luarocks 离线安装Moses 下载 Moses-Moses-1.6.1-1.zip cd Moses-Moses-1.6.1-1 Moses-Moses-1.6.1-1# luarocks ...

  4. 利用rman自己主动备份转储spfile

    利用rman自己主动备份转储spfile [情景简单介绍] 生产环境丢失了server的參数文件,rman已开启自己主动备份设置. [操作过程简述] ----启动rman $rman target / ...

  5. BestCoder Round #60.1003.GT and set/HDU5506 dfs

    GT and set  Accepts: 35  Submissions: 194  Time Limit: 2000/1000 MS (Java/Others)  Memory Limit: 655 ...

  6. bzoj1023 [SHOI2008]cactus仙人掌图 & poj3567 Cactus Reloaded——求仙人掌直径

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1023    http://poj.org/problem?id=3567 仙人掌!直接模仿 ...

  7. Python的包管理工具easy_install, setuptools, pip,distribute介绍

    1.相互之间的关联 easy_install, setuptools, pip,distribute,这几个工具的联系,如下图: 可以看到distribute是setuptools的取代,pip是ea ...

  8. Flink之Window Operation

    目录 Configuring Time Characteristics Process Functions Window Operators Applying Functions on Windows ...

  9. java replaceAll 忽略大小写

    public static void main(String[] args) { String temp=" CLASS_path : /aaabb/"; System.out.p ...

  10. Jquery和Ajax的关系!

    Jquery是一种JavaScript框架,而Ajax(Asynchronous JavaScript and XML)是异步JavaScript和XML. Jquery是JavaScript的框架, ...