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

Question

axios没有使用nuxt.config.js中baseURL和browserBaseURL的axios设置，而是将请求发送到本地主机。

下面是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(...)