为什么 axios 不使用 nuxt.config.js 中的设置？

Question

axios 未使用 nuxt.config.js 中的 baseURL 和 browserBaseURL 的 axios 设置，并且请求将转至 localhost。

这是 nuxt.config.js 的摘录：

  modules: [
    '@nuxtjs/axios'
  ],
  axios: {
    baseURL: 'http://192.168.8.137:8081',
    browserBaseURL: 'http://192.168.8.137:8081'
  },

这是 vue 文件中的代码：

<template>
  <v-treeview
    v-model="tree"
    :open="open"
    :items="items"
    activatable
    item-key="id"
    :load-children="listDir"
    :active.sync="active"
    return-object
  >
 ....
</template>

<script>
    import axios from 'axios'
    export default {
      ....
      methods: {
        async listDir(item) {
          // let url = 'http://192.168.8.137:8081/filemanager/ls'  // Works fine if hardcoded here
          let url = '/filemanager/ls'
          await axios.get(url)
            .then(....

我认为问题是我使用的是 axios.get(url) 而不是 $this.axios.get(url)，但是我的方法是从 vuetify treeview 组件调用的，而 $this 不可用。

如何获取 $this.axios？

如果我将 URL 硬编码到 axios 调用中，则代码可以正常工作。

Answer 1

使用

import axios from 'axios'

您正在导入“干净”的 axios 模块。您需要使用 nuxt 本身创建的 axios 实例。

在组件中（或在 Vue 操作中）仅使用（不导入 axios）

this.$axios.get(...)

或者（方便的 $get 方法返回响应数据而不是响应对象）

this.$axios.$get(...)