nuxtjs使用静态生成时出现Error: connect ECONNREFUSED 127.0.0.1:3000的问题解析

项目中使用了axios异步代理，

export default {
  async asyncData({ $axios }) {
    const BeersList = await $axios.$get("/api/beer/?key=beer");
    return { BeersList };
  },
};

nuxt.config.js

export default {
  axios: {
    proxy: true,
  },
  proxy: {
    '/api/beer/': {
      target: 'https://api.nuxtjs.dev/beers',
      pathRewrite: {
        '^/api/beer/': ''
      }
    },
  },
  target: 'static'
}

使用静态生成时

npm run generate

出现Error: connect ECONNREFUSED 127.0.0.1:3000这样一个错误，

 

 

 原因为@nuxtjs/axios代理只用于服务端，纯静态打包就会出这个错误，详细原因不写了。

解决方案：

1、nuxt.config.js注释axios代理；

export default {
/********
  axios: {
    proxy: true,
  },
  proxy: {
    '/api/beer/': {
      target: 'https://api.nuxtjs.dev/beers',
      pathRewrite: {
        '^/api/beer/': ''
      }
    },
  },
*********/
  target: 'static'
}

 

2、asyncData axios请求改为原始api接口地址

export default {
  async asyncData({ $axios }) {
    const BeersList = await $axios.$get("https://api.nuxtjs.dev/beers");
    return { BeersList };
  },
};

这时打包就没错误了