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

源码坊

在实际开发中，使用vue 后就是前后端分离开发了，这时候我们就需要访问后台的接口来拿到数据，需要URL,name,password来获取到token才能正常使用接口，下面就来配置。
1、找到config文件夹，在prod.env.js中添加一下代码（若没有此JS,自己创建一个就可以了）

1. '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中添加下面代码。

1. '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中调用这里写的变量

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

复制代码

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

1. 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 +"&timestamp="+getTimestamp;   }else{   config.url = url +config.url +"?timestamp="+getTimestamp;   }    }  return config;  },  err => {  alert(err)  return Promise.reject(err);  });

复制代码

这样访问后台接口配置就完成了！
以上这篇vue webpack开发访问后台接口全局配置的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持模板人源码模板人源码·版权声明


本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。本站部分作品是由网友自主投稿和发布、编辑整理上传，对此类作品本站仅提供交流平台，不为其版权负责。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。
      本网站所提供的信息，只供参考之用学习交流，切勿用作非法用途。本网站不保证信息的准确性、有效性、及时性和完整性。本网站及其雇员一概毋须以任何方式就任何信息传递或传送的失误、不准确或错误，对用户或任何其他人士负任何直接或间接责任。在法律允许的范围内，本网站在此声明，不承担用户或任何人士就使用或未能使用本网站所提供的信息或任何链接所引致的任何直接、间接、附带、从属、特殊、惩罚性或惩戒性的损害赔偿。        唯一网址: https://www.mubanren.com/thread-1373-1-1.html