基于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计数器代码
Nov 04 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
Aug 20 Javascript
angular2倒计时组件使用详解
Jan 12 Javascript
JavaScript轮播图简单制作方法
Feb 20 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
详解VUE 数组更新
Dec 16 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
JavaScript 闭包的使用场景
Sep 17 Javascript
WebStorm中如何将自己的代码上传到github示例详解
Oct 28 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实现网上点歌(二)
2006/10/09 PHP
php select,radio和checkbox默认选择的实现方法
2010/05/15 PHP
使用php判断网页是否gzip压缩
2013/06/25 PHP
php+mysql实现无限级分类
2015/11/11 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
php生出随机字符串
2017/07/06 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
10个新的最有前途的JavaScript框架
2009/03/12 Javascript
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
2016/06/12 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
2018/07/31 jQuery
node.js调用C++函数的方法示例
2018/09/21 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python实现文件内容批量追加的方法示例
2017/08/29 Python
python基于ID3思想的决策树
2018/01/03 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python3.5集合及其常见运算实例详解
2019/05/01 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
Django如何在不停机的情况下创建索引
2020/08/02 Python
英国在线自行车店:Merlin Cycles
2018/08/20 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
高中地理教学反思
2014/01/29 职场文书
文字自荐书范文
2014/02/10 职场文书
毕业寄语大全
2014/04/09 职场文书
小学生十佳少年事迹材料
2014/08/20 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
青年文明号申报材料
2014/12/23 职场文书
幼儿园大班教师随笔
2015/08/14 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
win10系统计算机图标怎么调出来?win10调出计算机图标的方法
2022/08/14 数码科技