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 };
  },
};

這時打包就沒錯誤了