如何在 NuxtJS axios 中为 API 使用 env var？

Question

我有一个工作片段

const response = await axios.get('http://example.com/categories')

但我想通过将 http://example.com 移动到 .env 来重构它。

我进行了以下更改但成功了

.env 包含 http://example.com
const response = await axios.get('/categories')
在nuxt.config.js中：

       publicRuntimeConfig: {
        axios: {
          baseURL: process.env.API_URL,
        },
      },

结果：正在尝试访问http://localhost:3000/categories

更新：

感谢@AmirhosseinShahbazi 的回答。

除了他的修复建议，我也改了nuxt.config.js

来自

       publicRuntimeConfig: {
        axios: {
          baseURL: process.env.API_URL,
        },
      },

至

  axios: {
    baseURL: process.env.API_URL,
  },

Answer 1

您正在项目中使用 Nuxt 的 Axios 模块。无需导入 Axios 即可使用它。通过导入它，您使用的是一个新实例，而不是您实际注入的实例 baseURL.

只需将 await axios.get 替换为 await this.$axios.get 并删除您的导入。

<script>
export default {
  name: 'App',
  data() {
    return {
      categories: [],
      error: null,
    }
  },
  async mounted() {
    try {
      const response = await this.$axios.get('categories')
      this.categories = response.data
    } catch (error) {
      this.error = error
    }
  },
}
</script>

如何在 NuxtJS axios 中为 API 使用 env var？

How to use env var for API in NuxtJS axios?

vue.js

axios

environment-variables

nuxt.js

dotenv