在 nuxt.config.js 中定義別名時在 Nuxt 中找不到依賴項

Question

嘗試使用自定義別名導入文件時出現此錯誤：

import api from 'api'

api in ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./pages/exercises.vue?vue&type=script&lang=js&

這是我的 nuxt.config.js：

import { resolve } from 'path'
const _api = process.env.API_MOCK === '1' ? 'apimock': 'api'

export default {
  buildModules: [
    '@nuxtjs/vuetify',
    '@nuxtjs/router'
  ],
  alias: {
    'api': resolve(__dirname,  './helpers/' + _api)
  },
}

我的文件結構如下所示：

.
├── components
│   ├── drawer.vue
│   ├── popup-criar-treino.vue
│   ├── popup-treino.vue
│   └── toolbar.vue
├── helpers
│   ├── api
│   │   └── urls.js
│   └── apimock
│       ├── db_mock
│       │   └── db_mock.js
│       ├── mockadapter.js
│       └── urls.js
├── jsconfig.json
├── layouts
│   └── default.vue
├── nuxt.config.js
├── package.json
├── package-lock.json
├── pages
│   ├── exercises.vue
│   ├── index.vue
│   ├── plans.vue
│   └── treinos.vue
└── router.js

我沒有得到我在這里缺少的東西，我正在關注 Nuxt 文檔中的示例： https ://nuxtjs.org/docs/configuration-glossary/configuration-alias/

Answer 1

您應該將api.js axios

export default function ({ $axios, app }, inject) {
  const api = $axios.create({
    headers: {
      common: {
        Accept: 'application/json',
        Authorization
      }
    }
  });
  inject('api', api)
}

然后將api添加到插件中，然后您可以在應用程序的任何位置將其作為alias調用

  plugins: [    
    { src: '~/plugins/api.js' },
  ]

this.$api.get/post...

使用您的目錄，您還可以像我上面建議的那樣注入 NuxtApp；