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 miscellanea -display data real time, using window.status
Jan 09 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
JS动态加载脚本并执行回调操作
Aug 24 Javascript
jQuery中fadein与fadeout方法用法示例
Sep 16 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
Feb 12 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
react ant Design手动设置表单的值操作
Oct 31 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中foreach()用法汇总
2015/07/02 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
PHP封装返回Ajax字符串和JSON数组的方法
2017/02/17 PHP
利用 fsockopen() 函数开放端口扫描器的实例
2017/08/19 PHP
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
Javascript优化技巧(文件瘦身篇)
2008/01/28 Javascript
常用Extjs工具:Extjs.util.Format使用方法
2012/03/22 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
Vue.JS项目中5个经典Vuex插件
2017/11/28 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
基于vue写一个全局Message组件的实现
2019/08/15 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
解析Python中的变量、引用、拷贝和作用域的问题
2015/04/07 Python
Python中使用urllib2模块编写爬虫的简单上手示例
2016/01/20 Python
python使用tkinter实现简单计算器
2018/01/30 Python
基于Python 装饰器装饰类中的方法实例
2018/04/21 Python
Django中的静态文件管理过程解析
2019/08/01 Python
python Xpath语法的使用
2020/11/26 Python
CSS3 Calc实现滚动条出现页面不跳动问题
2017/09/14 HTML / CSS
Spartoo瑞典:鞋子、包包和衣服
2018/09/15 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
村委会贫困证明
2014/01/14 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
捐款感谢信
2015/01/20 职场文书
个人党性锻炼总结
2015/03/05 职场文书
幼儿园2016年圣诞活动总结
2016/03/31 职场文书
市场营销计划书
2019/04/24 职场文书
通过shell脚本对mysql的增删改查及my.cnf的配置
2021/07/07 MySQL