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学习笔记(八) js内置对象
Jun 19 Javascript
红米手机抢购的js代码
Mar 10 Javascript
js进行表单验证实例分析
Feb 10 Javascript
JavaScript实现算术平方根算法-代码超简单
Sep 11 Javascript
JavaScript数据结构与算法之链表
Jan 29 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
原生js实现验证码功能
Mar 16 Javascript
在vue.js中抽出公共代码的方法示例
Jun 08 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
微信小程序之事件交互操作实例分析
Dec 03 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函数常用用法小结
2010/02/08 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
老鱼 浅谈javascript面向对象编程
2010/03/04 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
javascript调试过程中找不到哪里出错的可能原因
2013/12/16 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
JS中的Replace方法使用经验分享
2015/05/20 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
jQuery检查元素存在性(推荐)
2016/09/17 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
Python里隐藏的“禅”
2014/06/16 Python
python批量创建指定名称的文件夹
2019/03/21 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
Python页面加载的等待方式总结
2021/02/28 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
英国在线药房:Chemist.co.uk
2019/03/26 全球购物
小学标准化建设汇报材料
2014/08/16 职场文书
万能检讨书2000字
2014/10/17 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
超市啤酒狂欢夜策划方案范文!
2019/07/03 职场文书
python编写函数注意事项总结
2021/03/29 Python