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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
javascript引用对象的方法代码
Aug 13 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
jquery实现的代替传统checkbox样式插件
Jun 19 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
Apr 17 Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 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
日本十大科幻动漫 宇宙骑士垫底,第一已成经典
2020/03/04 日漫
晶体管来复再生式二管收音机
2021/03/02 无线电
定制404错误页面,并发信给管理员的程序
2006/10/09 PHP
php zend 相对路径问题
2009/01/12 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP数组对象与Json转换操作实例分析
2019/10/22 PHP
javascript中的几个运算符
2007/06/29 Javascript
javascript 自动转到命名锚记
2009/01/10 Javascript
Firefox中autocomplete="off" 设置不起作用Bug的解决方法
2011/03/25 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JavaScript实现将xml转换成html table表格的方法
2015/04/17 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
关于Vue Webpack2单元测试示例详解
2017/08/14 Javascript
JS实现字符串去重及数组去重的方法示例
2018/04/21 Javascript
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
python实现数据库跨服务器迁移
2018/04/12 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python暴力解压rar加密文件过程详解
2019/07/05 Python
python爬虫之快速对js内容进行破解
2019/07/09 Python
Python解析多帧dicom数据详解
2020/01/13 Python
keras:model.compile损失函数的用法
2020/07/01 Python
Python实现图片指定位置加图片水印(附Pyinstaller打包exe)
2021/03/04 Python
CSS3 毛玻璃效果
2019/08/14 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
省三好学生申请材料
2014/01/22 职场文书
婚宴新郎致辞
2015/07/28 职场文书
vue首次渲染全过程
2021/04/21 Vue.js
python中sqllite插入numpy数组到数据库的实现方法
2021/06/21 Python
在Spring-Boot中如何使用@Value注解注入集合类
2021/08/02 Java/Android
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers