vue webpack开发访问后台接口全局配置的方法


Posted in Javascript onSeptember 18, 2018

在实际开发中,使用vue 后就是前后端分离开发了,这时候我们就需要访问后台的接口来拿到数据,需要URL,name,password来获取到token才能正常使用接口,下面就来配置。

1、找到config文件夹,在prod.env.js中添加一下代码(若没有此JS,自己创建一个就可以了)

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_ROOT: '"//123.116.245.150:18081/api"',/*j后台接口地址*/
 USER_NAME: '""',/*账号*/
 PASS_WD: '""'/*密码*/
 
}

2、找到config文件夹,在dev.env.js中添加下面代码。

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
 
module.exports = merge(prodEnv, {
 API_ROOT: '"//125.116.245.101:18081/api"',/*后台接口地址*/
 USER_NAME: '"小小小"',/*账号*/
 PASS_WD: '"123456"',/*密码*/
 
})

然后再登录页面的from中调用这里写的变量

form: {
   name: process.env.USER_NAME,
   password: process.env.PASS_WD,
  
  },

在main.js中设置头部拦截器,代码如下

const url = process.env.API_ROOT;
 axios.interceptors.request.use(
  config => {
  let token = localStorage.getItem("x-auth-token");
  if (token) { // 判断是否存在token,如果存在的话,则每个http header都加上token
   config.headers.token = `${token}`;
  }
 
  if (config.url.indexOf(url) === -1) {
   let getTimestamp=new Date().getTime();
   if(config.url.indexOf('?')>-1){
   config.url = url + config.url +"×tamp="+getTimestamp;
   }else{
   config.url = url +config.url +"?timestamp="+getTimestamp;
   }
  
  }
  return config;
  },
  err => {
  alert(err)
  return Promise.reject(err);
  });

这样访问后台接口配置就完成了!

以上这篇vue webpack开发访问后台接口全局配置的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超清晰的document对象详解
Feb 27 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
js Form.elements[i]的使用实例
Nov 13 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
Dec 28 Javascript
基于JavaScript实现跳转提示页面
Sep 24 Javascript
js实现动态显示时间效果
Mar 06 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
JS实现可控制的进度条
Mar 25 Javascript
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 #Javascript
vue动态设置img的src路径实例
Sep 18 #Javascript
关于Vue项目跨平台运行问题的解决方法
Sep 18 #Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 #Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 #Javascript
vue自定义tap指令及tap事件的实现
Sep 18 #Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 #Javascript
You might like
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
提高代码性能技巧谈—以创建千行表格为例
2006/07/01 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
JavaScript reduce和reduceRight详解
2016/10/24 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
js操作二进制数据方法
2018/03/03 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
收集的几个Python小技巧分享
2014/11/22 Python
Python3实现购物车功能
2018/04/18 Python
Python 元组操作总结
2019/09/18 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
计算 s=(x*y)1/2,用两个宏定义来实现
2016/08/11 面试题
财务与信息服务专业推荐信
2013/11/28 职场文书
代理班主任的自我评价
2014/02/04 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
临时用工协议书范本
2014/10/29 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
学术会议邀请函
2015/01/30 职场文书