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 拾漏补遗
Dec 27 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
jQuery关键词说明插件cluetip使用指南
Apr 21 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
利用node实现一个批量重命名文件的函数
Dec 21 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 Vue.js
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
PHP4中实现动态代理
2006/10/09 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
PHP中的多行字符串传递给JavaScript的两种方法
2014/06/19 PHP
php学习笔记之基础知识
2014/11/08 PHP
php比较相似字符串的方法
2015/06/05 PHP
简单的js分页脚本
2009/05/21 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
Javascript基础_简单比较undefined和null 值
2016/06/14 Javascript
jQuery实现右下角可缩放大小的层完整实例
2016/06/20 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
2020/06/02 jQuery
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
python写日志封装类实例
2015/06/28 Python
python动态网页批量爬取
2016/02/14 Python
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
python 实现绘制整齐的表格
2019/11/18 Python
利用python汇总统计多张Excel
2020/09/22 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
计算机专业毕业生的自我评价
2013/11/18 职场文书
文明家庭先进事迹材
2014/01/27 职场文书
董事长秘书职责
2014/01/31 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
商铺消防安全责任书
2014/07/29 职场文书
个人党性分析材料
2014/12/19 职场文书
怒海潜将观后感
2015/06/11 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Python编写nmap扫描工具
2021/07/21 Python
PostgreSQL自动更新时间戳实例代码
2021/11/27 PostgreSQL