vue-cli引入、配置axios步骤详解

这次给大家带来vue-cli引入、配置axios步骤详解，vue-cli引入、配置axios的注意事项有哪些，下面就是实战案例，一起来看一下。一、npm 安装axios，文件根目录下安装，指令如下npm install axios --save-dev二、修改原型链，在main。
js中引入axiosimport axios from 'axios'接着将axios改写为Vue的原型属性。Vue。prototype。$http=axios这样之后就可在每个组件的methods中调用$http命令完成数据请求三、在组件中使用methods: { get(){ this。
$http({ method:'get' url:'/url' data:{} })。then(function(res){ console。log(res) })。catch(function(err){ console。
log(err) }) this。$http。get('/url')。then(function(res){ console。log(res) })。catch(function(err){ console。log(err) }) } }有关axios的配置请参考如下文档，点击打开链接下面给大家介绍下vue-cli配置axios的方法1。
npm install axios --save2。npm install @type/axios --save-dev(使用ts编写的需要此声明文件，升级的axios好像不需要了，已经自带)3。在src目录下添加axios。ts文件，内容：import axios from 'axios'import {Notification} from 'element-ui'import store from '/store/index'import buildconf from '/config/build。
rootpath。js'axios。defaults。withCredentials = true;axios。defaults。baseURL = buildconf。serverUrl// axios。defaults。baseURL = 'http://gsblackwidow。
chinacloudsites。cn/'axios。interceptors。request。use(function(config) { // document。getElementById('g-loader')。
style。display = 'flex' store。commit('requestModify' 1) return config;}, function(error){ return Promise。reject(error)})axios。
interceptors。response。use(function(response){ store。commit('requestModify' -1) // document。getElementById('g-loader')。
style。display = 'none' return response。data;}, function(error){ store。commit('requestModify' -1) // document。
getElementById('g-loader')。style。display = 'none' if(error。response。status === 401){ Notification({ title: '权限无效' message: '您的用户信息已经失效, 请重新登录' type: 'warning' offset: 48 }); window。
location。href = '/#/login' }else{ Notification({ title: '请求错误' message: `${error。response。status} \n ${error。
config。url}`, type: 'error' offset: 48, }) } return Promise。reject(error)})export default axios4。types文件夹中新建vue。d。
ts文件，内容：import {AxiosStatic, AxiosInstance } from 'axios'declare module 'vue/types/vue' { interface Vue { $axios: AxiosStatic; }}这样就可以在各个模块中通过this。
$axios来使用axios了其中axios中：1。 build。rootpath。js内容：var path = require('path')var rootpath = path。resolve(dirname, '/dist')module。
exports = rootpath2。 store是vuex的文件，所以要事先安装vuex。