vue-cli如何添加多种环境变量
vue-cli如何添加多种环境变量
目前webpack(vue-cli) 打包有两种变量,
development
,productor
, 如何添加一个test
的测试环境呢
vue-cli 3.0
官方默认两种类型
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",
即可
最后各种效果图
npm run dev
npm run test-dev
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如何添加多种环境变量的更多相关文章
- ***LINUX添加PHP环境变量:CentOS下将php和mysql命令加入到环境变量中
CentOS系统下如何将PHP和mysql命令加入到环境变量中,在Linux CentOS系统上 安装完php和MySQL后,为了使用方便,需要将php和mysql命令加到系统命令中,如果在没有添加到 ...
- linux下查看和添加PATH环境变量
linux下查看和添加PATH环境变量 $PATH:决定了shell将到哪些目录中寻找命令或程序,PATH的值是一系列目录,当您运行一个程序时,Linux在这些目录下进行搜寻编译链接. 编辑你的 PA ...
- Mac 可设置环境变量的位置、查看和添加PATH环境变量
Mac 启动加载文件位置(可设置环境变量) ------------------------------------------------------- (1)首先要知道你使用的Mac OS X是什 ...
- Mac可设置环境变量的位置、查看和添加PATH环境变量
Mac 启动加载文件位置(可设置环境变量) 首先要知道你使用的 Mac OS X 是什么样的 Shell,使用命令 echo $SHELL 如果输出的是:csh 或者是 tcsh,那么你用的就是 C ...
- linux下添加PATH环境变量
添加PATH环境变量,第1种方法:[root@lx_web_s1 ~]# export PATH=/usr/local/webserver/mysql/bin:$PATH 再次查看: [root@lx ...
- Mac下添加java环境变量
2015年4月22号更新: 发现一个坑:最近发现有同事按照本文方式配置jdk环境变量一直不成功,后来发现他是使用了“Oh-My-Zsh”,配置文件的路径不是/etc/profile或~/.bash_p ...
- Linux 添加到环境变量
在Linux下使用源码安装软件的时候,通常只能在软件安装目录下使用该软件命令,这样太麻烦,我们希望全局使用,可以将软件安装路径添加到系统环境变量里. 添加环境变量有2种方法: 1. 使用export命 ...
- mac 添加环境变量(jmeter添加至环境变量中)
Mac系统的环境变量,加载顺序为:a. /etc/profileb. /etc/pathsc. ~/.bash_profiled. ~/.bash_logine. ~/.profilef. ~/.ba ...
- ubuntu 应用添加进环境变量
BG:公司同事使用的电脑系统大多为windows ,有部分mac和Ubuntu(我就是那个部分Ubuntu),某些情况为了统一格式,便下载了一些解压即可使用的软件,但是每次点开文件夹然后点开程序很繁琐 ...
随机推荐
- beans有无状态
Spring Bean Scopes https://www.tutorialspoint.com/spring/spring_bean_scopes.htm When defining a < ...
- IntelliJ IDEA 、PyCharm、WebStorm、PhpStorm等JetBrains公司软件 激活的License Server本地搭建教程
一.背景 IntelliJ IDEA是JetBrains公司的一款IDE,主要用于java开发,可以编写Java.Groovy.Kotlin.Scala等语言,也可以直接做Android开发. 同系列 ...
- Mybatis 创建Configuration对象
Mybatis 创建Configuration对象是在项目启动时就创建了. 具体创建流程为: https://blog.csdn.net/wolfcode_cn/article/details/80 ...
- vue基础篇(一)
1.简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手 ...
- uva The Tower of Babylon[LIS][dp]
转自:https://mp.weixin.qq.com/s/oZVj8lxJH6ZqL4sGCXuxMw The Tower of Babylon(巴比伦塔) Perhaps you have hea ...
- 认识与设计Serverless(一)
一.什么是Serverless 定义:Serverless是一种无服务器的架构,区别于传统的Baas,SAAS,作为FAAS(函数即服务)而存在,函数由事件驱动触发并按需调用. 按需调用:区别于传统的 ...
- mono安装
linux上的DotNET,安装mono 当前,在Linux系统上架设ASP.NET网站.建设WEB应用工程项目已经在国内流行起来,而“Mono+Jexus”架构模式是Linux承载ASP.NET企业 ...
- (24)如何使用HttpClient
介绍 HttpClient是HTTP客户端的接口.HttpClient封装了各种对象,处理cookies,身份认证,连接管理等. 概念 HttpClient的使用一般包含下面6个步骤: 创建 Http ...
- ASP.NET 无法生成临时类(result=1)图解
说明: 执行当前 Web 请求期间,出现未处理的异常.请检查堆栈跟踪信息,以了解有关该错误以及代码中导致错误的出处的详细信息. 异常详细信息: System.InvalidOperationExcep ...
- python 封装时间常用操作方法-time,datetime
封装脚本: #encoding=utf-8import timefrom datetime import timedelta,date def date_time_chinese(): prin ...