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 相关文章推荐
jQuery 常见开发使用技巧总结
Dec 26 Javascript
精通Javascript系列之数值计算
Jun 07 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
Aug 14 Javascript
jQuery之自动完成组件的深入解析
Jun 19 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
Json按某个键的值进行排序
Dec 22 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
Sep 12 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
vue中watch和computed的区别与使用方法
Aug 23 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
德劲1103的维修打理经验
2021/03/02 无线电
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
使用 PHPMAILER 发送邮件实例应用
2012/11/07 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP统计当前在线用户数实例讲解
2015/10/21 PHP
php使用strip_tags()去除html标签仍有空白的解决方法
2016/07/28 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
JS DOM 操作实现代码
2010/08/01 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
2013/05/19 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
jQuery中ajax的load()方法用法实例
2014/12/26 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
微信小程序 商城开发(ecshop )简单实例
2017/04/07 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
使用Vue构建可重用的分页组件
2018/03/26 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
在Python中定义和使用抽象类的方法
2016/06/30 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python 邮件检测工具mmpi的使用
2021/01/04 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
领导四风问题整改措施思想汇报
2014/10/13 职场文书
社区务虚会发言材料
2014/10/20 职场文书
健康状况证明模板
2014/10/23 职场文书
公文写作:新员工转正申请书范本3篇!
2019/08/07 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android