vue-cli如何添加多种环境变量

目前webpack(vue-cli) 打包有两种变量,development, productor, 如何添加一个 test的测试环境呢

vue-cli 3.0

vue-cli3.0简化了业务需求,没有那么多额外的配置,目前想改变环境变量,官方默认如此, 网友1

官方默认两种类型 develpoment production,而我们实际开发过程中,会有本地开发,测试环境,正式环境等等,因而这两种环境变量是不够的,因而需要第三种乃至多种变量环境

基于vue-cli3.0进行配置

You can specify env variables by placing the following files in your project root:

.env                # loaded in all cases
.env.local # loaded in all cases, ignored by git
.env.[mode] # only loaded in specified mode
.env.[mode].local # only loaded in specified mode, ignored by git

An env file simply contains key=value pairs of environment variables:

FOO=bar
VUE_APP_SECRET=secre

上面所述,在根目录配置 .env,.env.[mode]...的文件,其次需要以VUE_APP开头进行变量申明

搭建项目进行测试

...
.env.development
.env.production
.env.test
package.json
...

每个文件的具体内容

.env.development

/* VUE_APP_CURRENTMODE 当前环境变量 */
VUE_APP_CURRENTMODE = 'development'
VUE_APP_ENV = 'development环境'
VUE_APP_LOGOUT_URL = 'http://l72.16.0.95/logout_development'

.env.production

VUE_APP_CURRENTMODE = 'production'
VUE_APP_ENV = 'production环境'
VUE_APP_LOGOUT_URL = 'http://l72.16.0.95/logout_production'

.env.test

/* NODE_ENV 目的用于指定是一开发还是生产形式进行操作 */
NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'test'
VUE_APP_ENV = 'test环境'
VUE_APP_LOGOUT_URL = 'http://baidu.cn/logout_test'

package.json

...
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
/* --mode test 用来传递参数 */
"test-serve": "vue-cli-service serve --mode test"
},
...

NODE_ENV, VUE_APP_* ...需要多注意一下

通过上面配置,VUE_APP_LOGOUT_URL 在不同环境变量生成不同的对应退出链接,

一下便是具体展示效果

yarn serve // 开发环境

yarn test-serve // 测试环境

yarn build // 生产环境

通过这样配置,只用通过命令行便可以生成不同环境下的项目,如此便可以不用每次都要去改动具体的变量了

vue-cli2配置

现在vue-cli2的文档被vue-cli3替代了,只能用这种最low但却最简单的办法来解决问题

...
webpack.base.conf.js
webpack.dev.conf.js
webpack.dev.conf.test.js
webpack.prod.conf.js
...

build文件夹下 新增一个需要的环境 webpack.dev.conf.test.js直接复制 webpack.dev.conf.js即可,

config文件夹下,添加一个dev.env.test.js

webpack.dev.conf.test.js

...
plugins: [
new webpack.DefinePlugin({
// 环境变量 改为自己设定的变量即可
'process.env': require('../config/dev.env.test')
})
...

dev.env.test.js 依旧复制对应 dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env') module.exports = merge(prodEnv, {
NODE_ENV: '"testing"',
VUE_APP_CURRENTMODE: '"testing"',
VUE_APP_ENV: '"testing环境"',
VUE_APP_LOGOUT_URL: '"http://l72.16.0.95/logout_testing"'
})

此处注意申明的变量 都需要 '"var"'这样定义,不然拿不到值

最后在package.json

中添加 "test-dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.test.js",即可

最后各种效果图

  1. npm run dev

  2. npm run test-dev

  3. npm run build

总结

  • 开发环境依旧是两种 development production,只是在这两种基础上进行具体指定不同变量罢了,因而所谓的测试环境只是在生产环境中,另外列出一种变量,这样用于区分生产与测试的不同而已
  • 目前vue-cli2和vue-cli3就都可以使用了,细节肯定都需要更多优化
  • 对应的代码码云

2019-02-14 vuecli2 补充

package.json

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"test-dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.test.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js",
"test": "node build/build.js --test=123 --build=12346"
}
  • 方式一

查了一些资料,对package.json有了更多的一些了解,才发现其实通过环境变量会有更加简洁的方案。npm_lifecycle_event

修改之前的方案

prod.env.js

const env = process.env.npm_lifecycle_event === 'build' ? require('../config/prod.env') : require('../config/prod.env.test')
  • 方式二

通过传参模式进行判断 process.argv --表示传参,我添加=是为了表示传参方便,便于识别

"test": "node build/build.js --test=123 --build=12346"

获取参数

const PARAMS = process.argv.splice(2)
function getKeyValue (params = []) {
if (!Array.isArray(params)) throw new Error('请传入数组格式参数')
const obj = {}
params.forEach(item => {
const o = item.slice(2).split('=')
obj[o[0]] = o[1]
})
return obj
}
const r = getKeyValue(PARAMS) // { test: '123', build: '12346' }

如此便可以在require时进行判断,具体选择哪一个即可

总结,这样就又多了几种方式,如此便更好使用

vue-cli如何添加多种环境变量的更多相关文章

  1. ***LINUX添加PHP环境变量:CentOS下将php和mysql命令加入到环境变量中

    CentOS系统下如何将PHP和mysql命令加入到环境变量中,在Linux CentOS系统上 安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到 ...

  2. linux下查看和添加PATH环境变量

    linux下查看和添加PATH环境变量 $PATH:决定了shell将到哪些目录中寻找命令或程序,PATH的值是一系列目录,当您运行一个程序时,Linux在这些目录下进行搜寻编译链接. 编辑你的 PA ...

  3. Mac 可设置环境变量的位置、查看和添加PATH环境变量

    Mac 启动加载文件位置(可设置环境变量) ------------------------------------------------------- (1)首先要知道你使用的Mac OS X是什 ...

  4. Mac可设置环境变量的位置、查看和添加PATH环境变量

    Mac 启动加载文件位置(可设置环境变量) 首先要知道你使用的 Mac OS X 是什么样的 Shell,使用命令 echo $SHELL 如果输出的是:csh 或者是 tcsh,那么你用的就是 C ...

  5. linux下添加PATH环境变量

    添加PATH环境变量,第1种方法:[root@lx_web_s1 ~]# export PATH=/usr/local/webserver/mysql/bin:$PATH 再次查看: [root@lx ...

  6. Mac下添加java环境变量

    2015年4月22号更新: 发现一个坑:最近发现有同事按照本文方式配置jdk环境变量一直不成功,后来发现他是使用了“Oh-My-Zsh”,配置文件的路径不是/etc/profile或~/.bash_p ...

  7. Linux 添加到环境变量

    在Linux下使用源码安装软件的时候,通常只能在软件安装目录下使用该软件命令,这样太麻烦,我们希望全局使用,可以将软件安装路径添加到系统环境变量里. 添加环境变量有2种方法: 1. 使用export命 ...

  8. mac 添加环境变量(jmeter添加至环境变量中)

    Mac系统的环境变量,加载顺序为:a. /etc/profileb. /etc/pathsc. ~/.bash_profiled. ~/.bash_logine. ~/.profilef. ~/.ba ...

  9. ubuntu 应用添加进环境变量

    BG:公司同事使用的电脑系统大多为windows ,有部分mac和Ubuntu(我就是那个部分Ubuntu),某些情况为了统一格式,便下载了一些解压即可使用的软件,但是每次点开文件夹然后点开程序很繁琐 ...

随机推荐

  1. Nginx高级玩法

    1. Nginx获取自定义消息头 .nginx是支持读取非nginx标准的用户自定义header的,但是需要在http或者server下开启header的下划线支持: underscores_in_h ...

  2. Ubuntu18.04下安装比特币客户端

    一.下载有两种安装方式:安装包和源码 二.安装1.通过安装包安装在https://bitcoin.org/en/download下载Windows,Mac OSX,Linux对应的安装包.安装过程比较 ...

  3. 第1章 1.10计算机网络概述--OSI参考模型和TCP_IP协议

    传输层负责将大数据文件分段,变成数据段. 网络层负责为小分段加上IP地址,变成数据包. 数据链路层负责将数包加上MAC地址和校验值,变成数据帧. TCP/IP协议是一群协议.不只是2个协议.

  4. 数据挖掘-逻辑Logistic回归

    逻辑回归的基本过程:a建立回归或者分类模型--->b 建立代价函数 ---> c 优化方法迭代求出最优的模型参数  --->d 验证求解模型的好坏. 1.逻辑回归模型: 逻辑回归(L ...

  5. Linux系统——Nginx基础

    Nginx是一个开源的,支持高性能.高并发(特别是静态资源)的www服务和代理服务软件,还具有反向代理复杂均衡功能和缓存服务功能,与lvs负载均衡及Haproxy等专业代理软件相比,nginx部署更简 ...

  6. javascript模式(1)--私有成员

    javascript是基于对象的一门语言,没有想java等语言那样子拥有封装的特性.但是javascript可以通过闭包来进行模拟. 1.构造函数与私有成员 可以用构造函数形成一个闭包,实现内部成员的 ...

  7. FFmpeg 入门(7):Seeking

    本文转自:FFmpeg 入门(7):Seeking | www.samirchen.com 处理 seek 命令 我们将为播放器添加 seek 的能力.这个过程中,我们会看到 av_seek_fram ...

  8. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  9. 怎样快速掌握一个用你没学过的框架写的PHP项目?

    我的思路一般是先搞定框架的route.也就是说,明白一个请求的url地址是对应的哪个controller处理的,找到controller后,再理解一下它的类库加载方案,也就是说一些辅助类以及自己逻辑类 ...

  10. nw.js node-webkit系列(18)怎么对.js进行编译以防你的代码暴露出来

    原文链接:http://blog.csdn.net/zeping891103/article/details/50819102 参考:https://segmentfault.com/a/119000 ...