如何在NuxtJS的axios中使用环境变量配置API基础地址

我现有一段可正常运行的代码片段：

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

我希望将其中的http://example.com抽离到.env环境变量文件中配置，因此做了如下改动，但未成功生效：

• .env文件内配置了对应的地址值
• 请求代码修改为const response = await axios.get('/categories')
• 在nuxt.config.js中添加如下配置：

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

运行结果：接口请求指向了http://localhost:3000/categories

修复方案 #

将nuxt.config.js中的配置从publicRuntimeConfig嵌套写法，修改为根层级直接配置：

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

修改后配置正常生效，问题得到解决。

内容的提问来源于stack exchange，提问作者Askar