文档章节

vue-cli3.0 环境变量与模式

o
 osc_odyg6b92
发布于 2018/07/13 15:32
字数 1021
阅读 5
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

vue-cli3.0移除了配置文件目录: config和build文件夹。可以说是非常的精简了,那移除了配置文件目录后如何自定义配置环境变量和模式呢?

为什么需要配置环境变量和模式呢?

所有方法肯定是来源于现实的需求。在一个产品的前端开发过程中,一般来说会经历本地开发、测试脚本、开发自测、测试环境、预上线环境,然后才能正式的发布。对应每一个环境可能都会有所差异,比如说服务器地址、接口地址、websorket地址…… 等等。在各个环境切换的时候,就需要不同的配置参数,所以就可以用环境变量和模式,来方便我们管理。

环境变量

cli-3.0总共提供了四种方式来制定环境变量:

  1. 在根目录添加.env文件,配置所有情况下都会用到的配置(不知道这个存在的意义,所有的都需要的也就不需要配置了吧)。
  2. 在根目录添加.env.local 文件,配置所有情况下都会用到的配置,与.env的区别是只会在本地,该文件不会被git跟踪。
  3. 在根目录添加.env.[mode] 文件,配置对应某个模式下的配置,比如:.env.development来配置开发环境的配置。
  4. 在根目录添加.env.[mode].local文件,配置对应某个模式下的配置,与.env.[mode]的区别也只是会在本地生效,该文件不会被git跟踪。

在文件中,我们只需要以key=value的方式就可以设置变量了。
例如:

FOO=bar
VUE_APP_SECRET=secret

环境变量的使用
设置完环境变量之后就可以在我们的项目中使用这两个变量了。不过还需要注意的是在项目的不同地方使用,限制也不一样。

  1. 在项目中,也就是src中使用环境变量的话,必须以VUE_APP_开头。例如我们可以在main.js中直接输出:console.log(process.env.VUE_APP_SECRET)
  2. 在webpack配置中使用,没什么限制,可以直接通过process.env.XXX来使用
  3. 在public/index.html中使用的:分三类:(没怎么用过)

       <%= VAR %> 用于非转换插值 例如:`<link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">` <%- VAR %> 用于HTML转义插值 <% expression %> 用于JavaScript控制流 

模式

模式是Vue CLI项目中的一个重要概念。默认情况下,Vue CLI项目中有三种模式:

  1. development:在vue-cli-service serve下,即开发环境使用
  2. production:在vue-cli-service build 和vue-cli-service test:e2e下,即正式环境使用
  3. test: 在vue-cli-service test:unit下使用

另外,如果你想要修改模式下默认的环境变量的话可以通过--mode来实现,例如:

 "dev-build": "vue-cli-service build --mode development"

有环境变量就能完成我们的需求了,为什么需要有模式的存在,这里我没查到详细的文档,个人认为模式是为了提供给第三方的插件一个辨识。例如vuex可以根据模式的不同,在development自动注入devtoolPlugin插件,利于开发,而在production中检测到错误不会进行console。

举例

说完了概念,可能还是比较模糊,可以试着添加一个stage环境,用来模拟预上线。
首先在package.json添加一种类型,并修改默认环境变量为stage环境变量
clipboard.png
在根目录下创建.env.stage文件,来声明变量:
clipboard.png

clipboard.png

这里声明的NODE_ENV = ‘production’用来表示这是生产环境。VUE_APP_CURRENTMODE为项目变量,outputDir为除数打包后文件的地址。
在vue.config.js中使用环境变量,制定输出文件为环境变量配置的文件:

clipboard.png

最后执行命令yarn stage能看到根目录下生成了stage文件:

clipboard.png

这样我们就配置完了stage环境。详细的项目地址可以参考:以vue-cli3.0为基础,结合vue-router、vuex、axios、iview组件库搭建一个工程化前端demo

参考文档:Environment Variables and Modes

转载自:https://segmentfault.com/a/1190000015133974

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Swift百万线程攻破单例(Singleton)模式

一、不安全的单例实现 在上一篇文章我们给出了单例的设计模式,直接给出了线程安全的实现方法。单例的实现有多种方法,如下面: class SwiftSingleton { } 这段代码的实现,在shared中进行条...

一叶博客
2014/06/20
3.4K
16
5分钟 maven3 快速入门指南

前提条件 你首先需要了解如何在电脑上安装软件。如果你不知道如何做到这一点,请询问你办公室,学校里的人,或花钱找人来解释这个给你。 不建议给Maven的服务邮箱来发邮件寻求支持。 安装Mav...

fanl1982
2014/01/23
1.2W
7
Python开发者社区整站源码--Pythoner

pythoner.net 整站源代码 依赖模块 Django 1.4.2 PIL DjangoVerifyCode 0.2.2 开发环境配置 运行scripts目录下的setupenv.sh文件,将会自动安装配置所需环境 设置本地环境变量:export env=D...

~T.y~
2013/04/10
3.2K
0
Android下的Shell环境--ZShaolin

ZShaolin 在你的 Android 设备上安装一个小型而且强大的脚本和 Shell 环境。并提供编辑、写和上传图片、音频、视频的应用:FFMpeg, ImageMagick, Sox, Oggz, Lua, GNU awk, sed, grep, and ...

匿名
2012/11/21
2.1K
0
JavaScript 运行环境--Nashorn

Nashorn 项目的目的是基于 Java 实现一个轻量级高性能的 JavaScript 运行环境。该项目使得 Java 程序员可在 Java 程序中嵌入 JavaScript 代码,通过 JSR-223 和 命令行工具开发 JavaScript 应...

匿名
2013/01/10
4.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

SQL 语句大全

点击上方“掌上编程”,选择“置顶或者星标” 优质文章第一时间送达! 一、基础 「1、说明:创建数据库」 CREATE DATABASE database-name    「2、说明:删除数据库」 drop database ...

GeneralMa
昨天
0
0
山东创睦网络科技有限公司:使用Python爬取全球新冠肺炎疫情数据

使用Python爬取全球新冠肺炎疫情数据 导入所需库包 获取实时数据的url 正式编写程序 查看输出结果 导入所需库包 在获取数据之前,我们需要先安装好所需的包requests和pandas: 1.如果是使用p...

osc_qv1fwke0
9分钟前
0
0
如何1年获得别人3年的工作经验(深度好文)

最近有同学问我,为什么你的工作年限不长,技术却这么厉害,我笑了笑,啥也没说。 我不是不想回答,是不知道怎么回答。在他们的定位可能就是,每方面都懂一点,遇到问题能够快速解决,就是比...

zhang_rick
今天
0
0
新基建带动行业

什么是“新基建”? 什么是“新基建”? 根据央视发布的信息来看,其涵盖了5G基站建设、新能源汽车充电桩、大数据中心、人工智能、工业互联网,特高压,城际以及城轨交通,涉及了七大领域和相...

osc_anefoz50
9分钟前
0
0
怕入错行?这群技术人写了本“择业指南”

计算机专业好找工作吗?哪些方向是当前的主流和热门方向呢? 计算机专业的你是不是还在为职业发展纠结犹豫呢? 刚经历完高考选专业的你是不是还在迷茫徘徊呢? 那么福利来啦! 《软件技术职业...

阿里云云栖号
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部