初学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条评论
点击登录参与评论