忽略Vue nuxt.config.js文件

Question

因此，我在项目根目录中有一个包含以下内容的nuxt.config.js文件：

{
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true,
  },
  proxy: {
    'http://localhost:8080/api/v1': 'http://localhost:3000/api/v1'
  }
}

我一直在努力理解为什么我的调用没有被代理(端点保持不变)，然后我注意到，即使我打破了语法(删除逗号或括号或其他任何东西)并重新启动服务器，我的应用程序甚至也不在乎。

有没有人能帮我把事情做好？

Answer 1

@nuxtjs/proxy已经包含

@nuxtjs/axios已包含@nuxtjs/proxy，无需单独安装，也无需添加到modules阵列中：

{
  modules: [
   '@nuxtjs/axios',
   //'@nuxtjs/proxy', // DON'T DO THIS
  ]
}

代理URL不正确

目前，您已将其设置为将原始URL附加到目标，如下例所示：

http://localhost:8080/api/v1/foo --> http://localhost:3000/api/v1/api/v1/foo
                     ^^^^^^^^^^^                                 ^^^^^^^^^^^

配置应如下所示：

{
  proxy: {
    'http://localhost:8080/api/v1': 'http://localhost:3030'
  }
}

请注意重复的axios配置

如果您使用的是create-nuxt-app，那么nuxt.config.js已经包含了一个空的axios配置，这很容易被忽略。如果您在配置对象的顶部插入了自己的配置，它将被自动插入到对象底部的空axios配置覆盖(这实际上会禁用代理)：

// nuxt.config.js
module.exports = {

  // your config
  axios: {
    proxy: true
  },


  //...


  // was automatically inserted; overwrites your config above
  axios: {}
}