vue中Npm run build 根据环境传递参数方法来打包不同域名


Posted in Javascript onMarch 29, 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'

总结

以上所述是小编给大家介绍的vue中Npm run build 根据环境传递参数方法来打包不同域名,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
JavaScript获取FCK编辑器信息的具体方法
Jul 12 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
react redux入门示例
Apr 19 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
js实现旋转的星空效果
Nov 01 Javascript
小程序实现录音上传功能
Nov 22 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
May 13 Javascript
JS获取url参数,JS发送json格式的POST请求方法
Mar 29 #Javascript
spirngmvc js传递复杂json参数到controller的实例
Mar 29 #Javascript
Vue.js 表单控件操作小结
Mar 29 #Javascript
js传递数组参数到后台controller的方法
Mar 29 #Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 #Javascript
Vue项目中如何引入icon图标
Mar 28 #Javascript
JavaScript中的E-mail 地址格式验证
Mar 28 #Javascript
You might like
php面向对象的方法重载两种版本比较
2008/09/08 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
Zend Framework教程之前端控制器Zend_Controller_Front用法详解
2016/03/07 PHP
分享php多功能图片处理类
2016/05/15 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
通过JAVAScript实现页面自适应
2007/01/19 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Bootstrap滚动监听(Scrollspy)插件详解
2016/04/26 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
2019/09/03 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[01:00:14]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第二场 2月28日
2021/03/11 DOTA
python发送伪造的arp请求
2014/01/09 Python
利用一个简单的例子窥探CPython内核的运行机制
2015/03/30 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
解决Pytorch自定义层出现多Variable共享内存错误问题
2020/06/28 Python
H5离线存储Manifest原理及使用
2020/04/28 HTML / CSS
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
大学生就业自荐信
2013/10/26 职场文书
销售副总经理岗位职责
2013/12/11 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
校园环保建议书
2014/05/14 职场文书
我爱幼儿园演讲稿
2014/09/11 职场文书
入党自荐书范文
2015/03/05 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
Springboot/Springcloud项目集成redis进行存取的过程解析
2021/12/04 Redis