vue cli4.0 如何配置环境变量

目录
  • 1.创建不同环境变量文件
  • 2.给.env文件添加内容
  • 3.在package.json中添加不同环境对应的执行语句
  • 4.使用

温馨提示：本文只适用于vue-cli 3.0及以上的版本哦~

------------------正文开始------------------

开发项目时，经常会需要在不同环境中切换。那么我们如何配置不同的环境变量呢？

为了更加方便消化本文章，建议先看下官方文档：

环境变量和模式

看完官方的文档如果还没有明白，可以参考本文。

在vue-cli构建的项目中，默认有3种模式，如下图：

我个人的理解就是：

你执行npm run serve时，对应的环境就是开发环境；

你执行npm run build时，对应的环境就是生产环境。

如果你开发的项目中，不止该3种，该咋整呢？像在我开发的项目中，就有本地环境(local)、开发环境(development)、测试环境(devtest)、预发布环境(beta)、生产环境(production)。请记住我括号里面的英文。

来，左边跟我一起画个龙，在你右边儿画一道彩虹~画完了，开始进入主题了~

------------------进入主题------------------

1.创建不同环境变量文件

如官方文档所说，通过为.env文件增加后缀来设置某个模式下特有的环境变量。我这里有5个环境，所以配置了5个.env文件。如下图：

2.给.env文件添加内容

基本格式如下：

NODE_ENV=环境名称VUE_APP_URL=对应的环境地址

如我本地环境的配置就如下图所示：

我本地是用的easy-mock模拟的数据，所以配置的地址是mock接口地址。

3.在package.json中添加不同环境对应的执行语句

如官方文档所说，可以通过传递--mode来配置不同的模式。我自己的项目配置如下图：

请注意我配置文件中的 serve与 build 。

4.使用

文件已创建好，配置语句也已写好。怎么用它呢？

首页你需要哪个环境，就执行哪个环境的命令语句。

比如我现在需要local环境，就执行npm run local-serve。如下图所示：

然后通过process.env.NODE_ENV获取环境名；通过process.env.VUE_APP_URL获取环境对应的url。

比如我们在axios请求中，就可以把它的baseURL设置为process.env.VUE_APP_URL，如下图所示：

后面的"/web"是根据我自己接口来的，你别也写个"/web"。

如果你不确定你自己现在是在哪个环境变量下，可以console.log("当前环境变量："+process.env.NODE_ENV)和console.log("当前环境路径："+process.env.VUE_APP_URL)看下。

像我的项目中就是下面这2个东东：

输出的内容就是.env.local文件里面配置的环境变量。

为了更好的理解，我们再执行一条语句，npm run serve,看看此时的环境变量是哪个？

为什么呢？

因为npm run serve默认指向.env.developement，我在里面配置的环境就是上面输出的内容。.env.developement的配置如下图：

总而言之就是，你需要哪个环境变量，就 【npm run对应的环境变量】 就完事了！

关于vue cli4.0配置环境变量就讲到这里了~~以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue cli4下环境变量和模式示例详解

    本文介绍了vue cli4下环境变量和模式示例详解,分享给大家,具体如下: 官方文档 环境变量 一个环境变量文件只包含环境变量的键值对: NODE_ENV=development VUE_APP_BASE_URL=http://127.0.0.1:8080/ 注意: NODE_ENV - 是 "development"."production" ."test"或者自定义的值.具体的值取决于应用运行的模式 BASE_URL - 会和 vue.con

  • vue-cli4.0多环境配置变量与模式详解

    vue-cli4.0多环境配置变量与模式详解

    vue-cli2.x还是vue-cli4.x模式的多环境变量配置方法(忘了). 1.在package.json文件中 "scripts": { "dev": "cross-env APP_ENV=dev node build/dev-server.js", "devTH": "cross-env APP_ENV=tianhe node build/dev-server.js", "build:pr

  • vue-cli配置环境变量的方法

    vue-cli配置环境变量的方法

    在实际项目开发中,经常会碰到需要环境变量的情景,在vue-cli的环境下,默认已经配置了一个NODE_ENV的环境变量,当npm run dev的时候这个是development, 当npm run build 的时候这个是production.用过vue-cli开发的通常对这个都不陌生,用这个最多的基本就是我们配置ajax请求的域名头了, if (process.env.NODE_ENV === 'production') { axios.defaults.baseURL = 'http://

  • vue cli4.0 如何配置环境变量

    vue cli4.0 如何配置环境变量

    目录 1.创建不同环境变量文件 2.给.env文件添加内容 3.在package.json中添加不同环境对应的执行语句 4.使用 温馨提示:本文只适用于vue-cli 3.0及以上的版本哦~ ------------------正文开始------------------ 开发项目时,经常会需要在不同环境中切换.那么我们如何配置不同的环境变量呢? 为了更加方便消化本文章,建议先看下官方文档: 环境变量和模式 看完官方的文档如果还没有明白,可以参考本文. 在vue-cli构建的项目中,默认有3种模

  • Linux CentOS 7.0中java安装与配置环境变量的步骤详解

    一.前言: CentOS7.0虽然自带JDK1.7和1.8,运行"java -version"命令也可以看到版本信息,但是jdk的安装环境不全,比如缺少tool.jar和dt.jar等,这就导致"javac"等这样的命令即便配置了环境变量也不能用,所以要重新安装jdk,并且配置环境变量,并解决"javac"命令不可用的问题. 下面话不多说了,来随着小编一起看看详细的介绍吧. 二.下载安装JDK 1.CentOS下,首先让当前用户获取root权限,

  • Vue CLI中模式与环境变量的深入详解

    Vue CLI中模式与环境变量的深入详解

    前言 在实际项目的开发中,我们一般会经历项目的开发阶段.测试阶段和最终上线阶段,每一个阶段对于项目代码的要求可能都不尽相同,那么我们如何能够游刃有余的在不同阶段下使我们的项目呈现不同的效果,使用不同的功能呢? 这里就需要引入环境的概念.官方文档中模式和环境变量说明 一般一个项目都会有以下 3 种环境: 开发环境(开发阶段,本地开发版本,一般会使用一些调试工具或额外的辅助功能): 测试环境(测试阶段,上线前版本,除了一些 bug 的修复,基本不会和上线版本有很大差别): 生产环境(上线阶段,正式对

  • 安装nvm并使用nvm安装nodejs及配置环境变量的全过程

    目录 一.安装nvm 环境变量配置: 验证nvm安装: 二.安装node 1.通过nvm安装node 2.node环境变量配置 三.安装Vue 1. 切换镜像源 2.查看当前镜像下包源 npm config get registry 3.安装vue.vue-cli.webpack 总结 一.安装nvm 1.下载nvm 解压后点击exe文件进行安装: 2.点击下一步安装到 D:\NVM 下 3.先在D:\NVM 下创建nodejs文件夹,然后将路径设置如下: 4.点击next 一直点击 完成安装:

  • 详解 MAC/Linux Vi配置环境变量及Java环境变量配置

    详解 MAC/Linux Vi配置环境变量及Java环境变量配置 vi基础 1.vi的基本概念 (1)基本上vi可以分为三种状态,分别是命令模式(command mode).插入模式(Insert mode)和底行模式(last line mode),各模式的功能区分如下: 1) 命令行模式command mode) 控制屏幕光标的移动,字符.字或行的删除,移动复制某区段及进入Insert mode下,或者到 last line mode. 2) 插入模式(Insert mode) 只有在Ins

  • cnpm不是内部命令的解决方案：配置环境变量【推荐】

    安装淘宝镜像: 要安装Angular4.于是我对着一股浓郁口音的视频开启了Angular4安装之旅.那口音说了,ang哥乐4不是那么好装的,由于我国的墙,所以我们要通过淘宝的镜像去安装. 于是先安装淘宝镜像,cnpm.这个百度一大堆. npm install -g cnpm --registry=https://registry.npm.taobao.org 安装完了之后检查是否安装成功. cnpm -v 若果出现以下东西说明安装成功. C:\Users\WenCh> cnpm -vcnpm@5

  • 在Win10上安装Tomcat服务器及配置环境变量的详细教程(图文)

    Tomcat 服务器是一个免费的开放源代码的 Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试 JSP 程序的首选.本文主要讲述Windows环境Tomcat服务器安装与环境变量配置 下载安装JDK 要想安装Tomcat服务器,首先要安装配置好JDK,可以参考JDK安装与环境变量配置 Windows + R然后输入cmd进入命令行窗口,检查Java是否安装正确,检查的命令为java -version 如果输出类似下面的内容说明安装成功

  • WIN10下的JDK安装与配置环境变量的过程(详细版)

    若学习JAVA,必须安装JDK(java development kit java开发工具包),并进行环境变量的配置后方可进行java的学习.经过几次配置环境变量失败后,我最终成功.通过对遇到的问题进行总结,形成这篇博文.欢迎交流.[当然,小白如我.]常见失败原因如下: 安装问题:将jdk与jre装在同一文件夹下,导致"jdk中的原文件"被覆盖.(出现javac指令错误.) 变量混淆:打开环境变量设置框后,有"用户变量"与"系统变量"两类,我们需

  • mac安装mysql数据库及配置环境变量的图文教程

    mac安装mysql数据库及配置环境变量的图文教程

    目录 安装mysql 配置环境变量 安装mysql 下载mysql.我下载的是:mysql-8.0.11-macos10.13-x86_64.dmg 双击打开mysql-8.0.11-macos10.13-x86_64.dmg,然后双击mysql-8.0.11-macos10.13-x86_64.pkg 一路点击继续,傻瓜式安装,没什么好说的 此处选择"Use Legacy Password Encryption",否则使用navicat连接mysql的时候,会报无法加载身份验证的错误

  • CentOS安装jdk的几种方法及配置环境变量方式

    目录 一.下载jdk 二.安装jdk 安装jdk(介绍三种方法) 方法一:利用yum源来安装jdk(此方法不需要配置环境变量) 方法二:用rpm安装jdk(可以使用man rpm命令查看rpm的帮助文档) 方法三:手动解压JDK的压缩包,然后设置环境变量 总结 一.下载jdk jdk下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下载jdk-8u152-linux-x

随机推荐