如何在nuxt的自定义文件夹中使用axios

Question

我已经在我的 Nuxt 应用程序中添加了 Axios，我正在尝试使用它的 api（自定义文件夹）文件夹，但 this.$axios 在那里未定义，所以我无法使用它。

这是我的设置：

    require("dotenv").config();
    
    export default {
     
      head: {
        title: 'nuxt-app',
        htmlAttrs: {
          lang: 'en',
        },
        meta: [
          { charset: 'utf-8' },
          { name: 'viewport', content: 'width=device-width, initial-scale=1' },
          { hid: 'description', name: 'description', content: '' },
        ],
        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
      },
    
      // Global CSS: https://go.nuxtjs.dev/config-css
      css: ['@assets/styles/app.scss'],
    
      // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
      plugins: ["~/plugins/axios.js"],
    
      // Auto import components: https://go.nuxtjs.dev/config-components
      components: true,
    
      // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
      buildModules: ['@nuxtjs/style-resources'],
      bootstrapVue: {
        bootstrapCSS: false,
        bootstrapVueCSS: false,
      },
    
      styleResources: {
        sass: [],
        scss: [],
        less: [],
        stylus: [],
      },
    
      // Modules: https://go.nuxtjs.dev/config-modules
      modules: [
        '@nuxtjs/axios',
        '@nuxtjs/dotenv',
      ], 
      build: {
       
      },
    }

在plugin/axios:

      export default function ({ $axios, error: nuxtError }) {
        $axios.setBaseURL('http://api.example.com');
        $axios.onError(error => {
          nuxtError({
            statusCode: error.response.status,
            message: error.message,
          });
          return Promise.resolve(false);
        })
      }

我想访问商店外的$axios，组件/布局位于与 Nuxt 创建的完全不同的文件夹中。

Answer 1

import axios from 'axios';

export default function ({ $axios, error: nuxtError }) {
        axios.setBaseURL('http://api.example.com');
        axios.onError(error => {
          nuxtError({
            statusCode: error.response.status,
            message: error.message,
          });
          return Promise.resolve(false);
        })
      }