vue项目webpack中Npm传递参数配置不同域名接口


Posted in Javascript onJune 15, 2018

项目开发中,前端在配置后端api域名时很困扰,常常出现:

本地开发环境: api-dev.demo.com

测试环境: api-test.demo.com

线上生产环境: api.demo.com,

这次是在Vue.js项目中打包,教大家个方法:

使用 npm run build -- xxx   ,根据传递参数xxx来判定不同的环境,给出不同的域名配置。

1.项目中/config/dev.env.js修改:

新增:HOST: '"dev"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 HOST: '"dev"'
})

2.项目中/config/prod.env.js修改:

获取传递进来的参数:

'use strict'
let HOST = process.argv.splice(2)[0] || 'prod';
console.log(HOST);
module.exports = {
 NODE_ENV: '"production"',
 HOST: '"'+HOST+'"'
}

3.项目中ajax封装的地方修改:

/**
** 设置API接口域名
**/
 
let apiUrl = '';
// 根据 process.env.HOST 的值判断当前是什么环境
// 命令:npm run build -- test ,process.env.HOST就设置为:'test'
let HOST = process.env.HOST;
HOST = HOST === 'prod' ? '' : '-' + HOST;
 
apiUrl = 'http://api'+HOST+'.demo.com';
axios.defaults.baseURL = apiUrl;

4.最后敲命令:

npm run build -- test   

注意?是2个横杠,后面跟参数,这样 process.env.HOST 就获取到参数 'test' 了,

apiUrl = 'http://api-test.demo.com'

若线上prod发布打包,npm run build -- prod

apiUrl = 'http://api.demo.com'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
node.js中的buffer.toString方法使用说明
Dec 14 Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 Javascript
Vue.2.0.5过渡效果使用技巧
Mar 16 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
angular动态表单制作
Feb 23 Javascript
如何利用ES6进行Promise封装总结
Feb 11 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 #Javascript
vue和webpack安装命令详解
Jun 15 #Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 #Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 #Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 #Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 #Javascript
webpack公共组件引用路径简化小技巧
Jun 15 #Javascript
You might like
最简单的PHP程序--记数器
2006/10/09 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
JS仿flash上传头像效果实现代码
2011/07/18 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
2014/08/18 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
详解angularJs中自定义directive的数据交互
2017/01/13 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
JavaScript实现开关等效果
2017/09/08 Javascript
vue中keep-alive的用法及问题描述
2018/05/15 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python3 实现对图片进行局部切割的方法
2018/12/05 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
自我评价200字分享
2013/12/17 职场文书
十八大感想感言
2014/02/10 职场文书
幼儿园保育员岗位职责
2014/04/13 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
关于读书的活动方案
2014/08/14 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
南京南京观后感
2015/06/02 职场文书
同意报考证明
2015/06/17 职场文书
Python集合set()使用的方法详解
2022/03/18 Python
动作冒险《Hell Is Us》将采用虚幻5 消灭怪物探索王国
2022/04/13 其他游戏