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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
编写可维护面向对象的JavaScript代码[翻译]
Feb 12 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
vue集成kindeditor富文本的实现示例代码
Jun 07 Javascript
JavaScript实现HSL拾色器
May 21 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常用函数的用法详解
2013/05/10 PHP
PHP 解决session死锁的方法
2013/06/20 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
Smarty中的注释和截断功能介绍
2015/04/09 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
ThinkPHP like模糊查询,like多匹配查询,between查询,in查询,一般查询书写方法
2018/09/26 PHP
javascript concat数组累加 示例
2009/09/03 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
input点击后placeholder中的提示消息消失
2016/01/15 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
关于Bootstrap按钮组件消除黄框的方法
2017/05/19 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
基于Python解密仿射密码
2019/10/21 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
使用Python防止SQL注入攻击的实现示例
2020/05/21 Python
python批量修改交换机密码的示例
2020/09/22 Python
改变 Python 中线程执行顺序的方法
2020/09/24 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
英文导游欢迎词
2014/01/11 职场文书
求职简历的自我评价
2014/01/31 职场文书
五年级数学教学反思
2014/02/11 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
党员承诺书怎么写
2014/05/20 职场文书
学生安全责任协议书
2016/03/22 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP