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://customer.medsci.cn'
}

通常会有测试服务器和正式服务器环境之分,我们请求的域名也得区分,所以通过proces.env.NODE_ENV来区分环境变量,通过这个能够全局访问的参数,我们可以处理很多需要环境处理不同的操作.

上面的process.env.NODE_ENV是vue-cli默认配置的,有时候我们可能觉得光是只有一个开发环境和生产环境还不够,比如我们还想来一个测试坏境,这时候就需要自己定义了.以下以windows坏境为例,mac环境类似.

首先可以安装cross-env

npm install cross-env --save-dev

vue-cli的配置本质就是webpack的配置,当我们运行npm run dev 的时候,其实执行的是package.json中的scripts 的dev中 ,即build/dev-server.js 这里面一系列的配置启动整个服务.

我们只想加一个环境变量,可以复制一份,在dev下加一个devtest命令:

"devtest": "cross-env TESTING=true node build/dev-server.js",

这样我们就可以通过npm run devtest也能启动整个服务了,注意上面的命令,我们加了一个TESTING=true ,这个就是加入的环境变量,TESTING:true, 通过上面的devtest的配置,我们可以运行npm run devtest像nppm run dev那样运行起来整个程序,不过我们发现,此时在项目中我们获取不到process.env.TESTING这个变量,这是为什么呢,如果是直接用webpack是可以的,经过查看,是在vue-cli的一系列配置文件中,已经写死了这些,不过我们可以改动加上

在根目录 config下,有dev.env.js和prod.env.js,这两个文件就是关键了,我们在NODE_ENV下面加一行TESTING:process.env.TESTING

module.exports = {
 NODE_ENV: '"production"',
 TESTING: process.env.TESTING
}

这时我们就能全局访问process.env.TESTING变量了,当我们npm run dev的时候,这个是undefined,当npm run devtest的时候是true, 同理我们可以添加一个npm run test命令, 与npm run build命令对应,加入打包测试的环境变量.

vue-cli的配置本质还是webpack的配置, 普通的webpack配置也可以采用此方法.

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue使用json-server进行后端数据模拟功能

    正开发过程中 前后端分离或者不分离 ,接口多半是之后与页面的开发 ,所以建立rest的APL的接口 给前端提供虚拟的数据是非常必要的 所以这里我使用了json-server作为工具,支持CORS和JSONP跨域请求,支持GET, POST, PUT, PATCH 和 DELETE 方法,更提供了一系列的查询方法,如limit,order等,接下来我把我自己的上使用心写成文档 安装 首先必须有node环境(都用到json-server一定会有node环境吧)然后全局安装json-server np

  • 详解vue-cli中模拟数据的两种方法

    在main.js中引入vue-resource模块,Vue.use(vueResource). 1.使用json-server(不能用post请求) 接下来找到build目录下的webpack.dev.conf.js文件,在const portfinder = require('portfinder')后面引入json-server. /*引入json-server*/ const jsonServer = require('json-server') /*搭建一个server*/ const

  • vue新vue-cli3环境配置和模拟json数据的实例

    最近在研究学习vue,发现环境配置特麻烦,就是跟着文档步骤一步一步来,也会遇到各种想不到的坑,vue-cli3的配置比老的简洁了很多,与以往的配置也有所不同: 1.安装步骤以前是 npm install vue-cli -g 现在是: npm install -g @vue/cli 2.vue-cli2 新建项目 vue init webpack Vue-Project vuecli3新建项目,在你创建后会有一个保存当前配置的功能 vue create <project-name> vue-c

  • vue配置请求本地json数据的方法

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下: 在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 const express = require('express') const app = express() const appData = require('../data.json') // 加载本地json文件 const seller = appDa

  • vue-resource + json-server模拟数据的方法

    本文介绍了vue-resource + json-server模拟数据,分享给大家,具体如下: 一.安装 npm install vue-resource --save npm install json-server --save 二.配置与使用vue-resource // main.js import VueResource from 'vue-resource' Vue.use(VueResource) this.$http.get('api/getNewsList') .then(fun

  • 关于不懂Chromedriver如何配置环境变量问题解决方法

    今天新学selenium,安装Chromedriver时翻看了许多网上资料,还有很多CSDN大神写的博客,大神们写东西很多都是一笔带过,让我这种新手有点不知所措,弄了好久才弄懂,具体该如何操作,就将自己学到的分享一下,供大家参考,同时加深印象. 首先当然是下载Chromedriver:(下载路径:https://sites.google.com/a/chromium.org/chromedriver/downloads) 或者本地下载路径:https://www.jb51.net/softs/5

  • 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://

  • 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

  • win7 64位系统JDK安装配置环境变量教程

    win7 64位系统JDK安装配置环境变量教程

    由于重做系统,平时需要进行android类编译反编译工作,于是重新装了下JDK并把过程记录分享出来. 具体步骤 首先,下载JDK安装包,到官网http://www.oracle.com/technetwork/java/javase/downloads/index.html进行下载,点左边的Java Platform (JDK) 7u51进入下一个下载页面, 点左边的Accept License Agreement,接受许可协议,方能下载,由于我装的WIN7 64位系统,所以选对应的64位安装包

  • Vue3之 Vue CLI多环境配置

    Vue3之 Vue CLI多环境配置

    目录 一.前言 二.实现切换 1.增加开发和生产配置文件 2.修改编译和启动支持多环境 3.修改axios请求地址支持多环境 一.前言 这里相对于之前就没那么麻烦了,通俗点说就是使用配置文件来管理多环境,实现环境的切换. 二.实现切换 1.增加开发和生产配置文件 在web的根目录下,创建开发环境切换配置文件.env.dev,内容如下: NODE_ENV=development VUE_APP_SERVER=http://127.0.0.1:8880 在web的根目录下,创建线上环境切换配置文件.

  • 浅谈三种配置linux环境变量的方法(以java为例)

    1. 修改/etc/profile文件 如果你的计算机仅仅作为开发使用时推荐使用这种方法,因为所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性问题. ·用文本编辑器打开/etc/profile ·在profile文件末尾加入: export JAVA_HOME=/usr/share/jdk1.6.0_14 export PATH=$JAVA_HOME/bin:$PATH export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/li

  • vue-cli3添加模式配置多环境变量的方法

    vue-cli3配置多环境变量 先挂官网描述:环境变量和模式 需求 根据运行环境判断执行代码: 预发环境操作完成跳转地址与线上环境跳转地址不同 线上环境添加埋点脚本 实现 Step1:在项目根目录中新建.env.uat .env.uat配置如下: VUE_APP_BUILD_TYPE=uat vue-cli中规定,只有以 VUE_APP_ 开头的变量会被 webpack.DefinePlugin 静态嵌入到客户端侧的包中. 代码中可以通过 process.env.VUE_APP_SECRET 这

  • mac上配置Android环境变量的方法

    1.AndroidSDK路径查看 (1)AndroidStudio: 菜单栏AndroidStudio > Preferences > Appearences&Behavior > System Settins > Android SDK tab中的SDK Location. (2)Eclipse: 菜单栏Eclipse > Preferences > Android tab中的SDK Location 2.环境变量配置: Android_HOME:即配置SDK

  • win10下配置java环境变量的方法

    一.准备java 我已经把java装到了在D盘: 二.配置java环境变量 点击设置,进入windows设置页面: 搜索高级系统设置: 在系统变量里添加以下变量: 新建系统变量JAVA_HOME, java的安装路径,需要到java里的jdk目录: 新建系统变量CLASSPATH变量, 输入如下值: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar,注意前面的小数点也要带上. 在系统变量的path变量里添加两行: %JAVA_HOME%\bin %JAVA_

  • IDEA配置jdk环境变量的方法

    提前安装jdk,配置环境变量 一.配置jdk 1.依次点开File -->Project Structure,点击左侧标签页,点击SDKs 2.点击+号,选SDK 3.在弹出框选择jdk路径(我本地装了两个jdk,大家可以忽略) 4.点击OK,可以看到jdk配置好了 5.按照这个顺序,可以配置多个jdk 到此这篇关于IDEA配置jdk环境变量的方法的文章就介绍到这了,更多相关IDEA配置jdk内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

随机推荐