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 相关文章推荐
点击广告后才能获得下载地址
Oct 26 Javascript
拖动Html元素集合 Drag and Drop any item
Dec 22 Javascript
javascript 函数参数限制说明
Nov 19 Javascript
js调用图片隐藏&显示实现代码
Sep 13 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
Easyui Tree获取当前选择节点的所有顶级父节点
Feb 14 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
用node和express连接mysql实现登录注册的实现代码
Jul 05 Javascript
vue中v-model动态生成的实例详解
Oct 27 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
Netflix将与CLAMP、乙一以及冲方丁等6名知名制作人合伙展开原创动画计划!
2020/03/06 日漫
yii框架搜索分页modle写法
2016/12/19 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
jquery 事件冒泡的介绍以及如何阻止事件冒泡
2012/12/25 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
详解Javascript动态操作CSS
2014/12/08 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
2015/02/06 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
Vue中的v-cloak使用解读
2017/03/27 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
基于layui轮播图满屏是高度自适应的解决方法
2019/09/16 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
2020/09/22 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
python ---lambda匿名函数介绍
2019/03/13 Python
使用Python和Prometheus跟踪天气的使用方法
2019/05/06 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
中科软笔试题和面试题
2014/10/07 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
党员承诺书格式
2014/05/21 职场文书
劳动竞赛口号
2014/06/16 职场文书
2014年重阳节敬老活动方案
2014/09/16 职场文书
工作犯错保证书
2015/05/11 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
Python Django ORM连表正反操作技巧
2021/06/13 Python
数据库之SQL技巧整理案例
2021/07/07 SQL Server