基于vue cli 通过命令行传参实现多环境配置


Posted in Javascript onJuly 12, 2018

大多数项目都有生产环境和开发环境,一般情况下应该够了,但是有时候还需要sit,uat,本地等环境,这时候假如要通过注释的方式切换环境就相当麻烦了. 如果可以像下面这样切换环境就方便了

npm run serve //默认本地开发环境

npm run serve -sit //本地开发中使用sit环境

npm run serve -uat //本地开发中使用uat环境

npm run build //默认打包后使用生产环境

npm run build -local //打包后使用本地环境

npm run build -sit //打包后使用sit环境

`npm run build -uat //打包后使用uat环境

如果对@vue/cli还不熟的话,建议看看这篇文章https://3water.com/article/138055.htm

我们首先在根目录下面创建一个vue.config.js文件,如图

基于vue cli 通过命令行传参实现多环境配置 

vue.config.js代码如下:

const webpack = require('webpack')
const environment = require('./build/environment')
module.exports = {
 baseUrl: '/wxperp/',
 configureWebpack: {
 plugins: [
 new webpack.DefinePlugin({
 'process.env.STAGE': JSON.stringify(environment.stage),
 'process.env.LOCAL_URL': JSON.stringify(environment.localUrl)
 })
 ]
 }
}

new webpack.DefinePlugin的作用是允许你创建一个在编译时可以配置的全局常量

然后在根目录创建一个build文件夹,里面创建一个environment.js的文件

基于vue cli 通过命令行传参实现多环境配置 

environment.js代码如下:

const os = require('os')
// 获取命令行变量
const configArgv = JSON.parse(process.env.npm_config_argv)
const original = configArgv.original.slice(1)
const stage = original[1] ? original[1].replace(/-/g, '') : ''
// 本地ip地址
let localUrl
try {
 const network = os.networkInterfaces()
 localUrl = network[Object.keys(network)[0]][1].address
} catch (e) {
 localUrl = 'localhost'
}
localUrl = 'http://' + localUrl + '/'

module.exports = {
 stage, localUrl
}

这个stage就是你输入的变量,比如你输入 npm run serve -sit 那么stage的值就为sit

这个localUrl就是你本地的ip,不过很多人应该用不到,我们公司比较特殊,开发的时候,接口请求的地址都是请求的自己本地服务器, 如果不自动获取本地ip,那么每个同事都得在配置文件中保留一份自己得ip地址,很麻烦,所以就自动获取了.

接下来再src目录下面创建一个config.js,记得在main.js中引用这个config.js

基于vue cli 通过命令行传参实现多环境配置 

environment.js代码如下:

(() => {
 const urlMap = {
 local: process.env.LOCAL_URL + 'api',
 sit: 'http://xxx.xxx.xxx:xxxx/sit/api',
 uat: 'http://xxx.xxx.xxx:xxxx/uat/api',
 prod: 'http://xxx.xxx.xxx:xxxx/prod/api'
 }
 //sit,uat,prod
 let stage = process.env.STAGE
 //development,production
 const nodeEnv = process.env.NODE_ENV
 //nodeEnv为production并且stage不存在默认为生产环境
 if (nodeEnv === 'production' && !stage) {
 stage = 'prod'
 } else {
 //stage不存在默认为本地开发环境
 stage = stage || 'local'
 }
 console.log('ip:' + urlMap[stage])
})()

我们输入 npm run serve -sit ,页面打印如下:

基于vue cli 通过命令行传参实现多环境配置 

再??孪?process.env.NODE_ENV是@vue/cli提供的,貌似有三个值(development,production,test),

你运行 npm run serve 得到的就是development

你运行 npm run build 得到的就是production

你运行 npm run test 得到的就是test (我没试过)

我默认打包是打包生产环境,当然你也可以输入参数打包其他环境

总结

以上所述是小编给大家介绍的基于vue cli 通过命令行传参实现多环境配置,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js控制href内容的连接内容的变化示例
Apr 30 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
chrome不支持form.submit的解决方案
Apr 28 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
node 命令方式启动修改端口的方法
May 12 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 #Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 #Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 #Javascript
Vue.js实现的计算器功能完整示例
Jul 11 #Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 #Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 #Javascript
JSON数据中存在单个转义字符“\”的处理方法
Jul 11 #Javascript
You might like
php 传值赋值与引用赋值的区别
2010/12/29 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP连接SQLServer2005的方法
2015/01/27 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php中文乱码问题的终极解决方案汇总
2017/08/01 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
详解AngularJS中的http拦截
2016/02/09 Javascript
全面接触神奇的Bootstrap导航条实战篇
2016/08/01 Javascript
JavaScript常见的五种数组去重的方式
2016/12/15 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Webpack中loader打包各种文件的方法实例
2019/09/03 Javascript
vue实现路由监听和参数监听
2019/10/29 Javascript
Javascript查看大图功能代码实现
2020/05/07 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python中查看变量内存地址的方法
2015/05/05 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python实现替换word中的关键文字(使用通配符)
2020/02/13 Python
Python爬取YY评级分数并保存数据实现过程解析
2020/06/01 Python
Python中的With语句的使用及原理
2020/07/29 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Django框架请求生命周期实现原理
2020/11/13 Python
百丽国际旗下购物网站:优购
2017/02/28 全球购物
美国用餐电影院:Alamo Drafthouse Cinema
2020/01/23 全球购物
客户经理岗位职责
2013/12/08 职场文书
评析教师个人的自我评价
2014/02/19 职场文书
经贸专业毕业生求职信
2014/03/23 职场文书
学习优秀党务工作者先进事迹材料思想报告
2014/09/17 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
筑梦中国心得体会
2016/01/18 职场文书
小公司融资,商业计划书的8切记
2019/07/15 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers