初学Vue,使用Vue-CLI4脚手架生成项目后,通过脚手架安装Axios插件后,Axios不能正常使用。
分析代码是因为Vue-CLI4中使用的Vue3.0版本做了一些变更,导致Axios插件代码错误。
可以将Axios 自动生成的plugin代码做一些修改。
"use strict";
//import Vue from 'vue';
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
let config = {
// baseURL: process.env.baseURL || process.env.apiUrl || ""
// timeout: 60 * 1000, // Timeout
// withCredentials: true, // Check cross-site Access-Control
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
function(config) {
// Do something before request is sent
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
_axios.interceptors.response.use(
function(response) {
// Do something with response data
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
/*增加以下代码*/
export default function(app)=>{
app.config.globalProperties.$axios = _axios;
}
/*
注释掉原代码以下部分
Plugin.install = function(Vue, options) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
}
},
$axios: {
get() {
return _axios;
}
},
});
};
Vue.use(Plugin)
export default Plugin;
*/修改main.js:
import installAxios from './plugin/axios'; ... const app = createApp(App) installAxios(app) ...
之后全局即可使用this.$axios来调用axios

0条评论
点击登录参与评论