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 相关文章推荐
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
使用text方法获取Html元素文本信息示例
Sep 01 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
Canvas 制作动态进度加载水球详解及实例代码
Dec 09 Javascript
利用jquery实现实时更新歌词的方法
Jan 06 Javascript
关于ES6的六个小特性(二)
Feb 20 Javascript
Node做中转服务器转发接口
Oct 18 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
jQuery实现模糊查询的方法分析
May 10 jQuery
mocha的时序规则讲解
Feb 16 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备份数据库生成SQL文件并下载的函数代码
2012/02/05 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
PHP 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
destoon整合UCenter图文教程
2014/06/21 PHP
PHP实现的英文名字全拼随机排号脚本
2014/07/04 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
浅谈PHP之ThinkPHP框架使用详解
2020/07/21 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
JS 强制设为首页的代码
2009/01/31 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
2017/03/08 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
2017/07/24 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
vue+element树组件 实现树懒加载的过程详解
2019/10/21 Javascript
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
python开发之thread线程基础实例入门
2015/11/11 Python
python监控文件或目录变化
2016/06/07 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
CSS3绘制圆角矩形的简单示例
2015/09/28 HTML / CSS
2014厂务公开实施方案
2014/02/17 职场文书
中学生评语大全
2014/04/18 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
物流专业求职信
2014/06/30 职场文书
离婚案件答辩状
2015/05/22 职场文书
2015年校医个人工作总结
2015/07/24 职场文书