vue项目webpack中Npm传递参数配置不同域名接口


Posted in Javascript onJune 15, 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'

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
自写的一个jQuery圆角插件
Oct 26 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
基于jQuery Ajax实现上传文件
Mar 24 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
jQuery获取单击节点对象的方法
Jun 02 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
微信小程序自定义导航隐藏和显示功能
Jun 13 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 Javascript
JS事件流与事件处理程序实例分析
Aug 16 Javascript
vue如何搭建多页面多系统应用
Jun 17 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 #Javascript
vue和webpack安装命令详解
Jun 15 #Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 #Javascript
详解webpack的proxyTable无效的解决方案
Jun 15 #Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 #Javascript
vue和webpack打包项目相对路径修改的方法
Jun 15 #Javascript
webpack公共组件引用路径简化小技巧
Jun 15 #Javascript
You might like
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
解析PHP中empty is_null和isset的测试
2013/06/29 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
ExtJS 2.0 GridPanel基本表格简明教程
2010/05/25 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
微信小程序首页的分类功能和搜索功能的实现思路及代码详解
2018/09/11 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
基于Layui自定义模块的使用方法详解
2019/09/14 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
2021/02/14 Javascript
[02:24]DOTA2痛苦女王 英雄基础教程
2013/11/26 DOTA
深度剖析使用python抓取网页正文的源码
2014/06/11 Python
Python的迭代器和生成器
2015/07/29 Python
Python中Flask-RESTful编写API接口(小白入门)
2019/12/11 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
celery在python爬虫中定时操作实例讲解
2020/11/27 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
2016/07/13 HTML / CSS
美国瑜伽品牌:Gaiam
2017/10/31 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
领导党性分析材料
2014/02/15 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
《叶问2》观后感
2015/06/15 职场文书
歌咏比赛主持词
2015/06/29 职场文书
SQL Server作业失败:无法确定所有者是否有服务器访问权限的解决方法
2021/06/30 SQL Server
python画条形图的具体代码
2022/04/20 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers
鸿蒙3.0体验感怎么样? 鸿蒙3.0系统评测向
2022/08/14 数码科技