nuxt.js使用axios

最近在使用nuxt.js開發一個微信的項目，從調試、發布遇到的麻煩稍作記錄

按照該文檔：https://zh.nuxtjs.org/guide/installation

使用：$ npx create-nuxt-app nuxt-first

創建nuxt-first項目的過程，會詢問是否各種組件，包括axios。我直接選擇使用。因創建過程（腳手架）添加的，我們會發現dependencies沒有axios，但可以在nuxt.config.js的modules節點找到相關內容

 

 

 

怎么用呢？大家可以參考這個文檔：https://axios.nuxtjs.org/usage

我選擇這么來用：

this.$axios.post("/trans",this.model).then( (res) => {...

初步測試沒有問題。現在修改端口。我在nuxt.config.js添加server節點

 

 

 如此測試：npm run dev，沒有什么問題，但build后，這么運行：npm run start，問題出現了

 

 

 束手無策之下，試試在nuxt.config.js設置axios使用代理

 axios: {
    prefix: '/api',
    credentials: true,
    proxy:true
  },
  proxy:
  {
      '/api':'http://localhost:4000'
  },

 

所有問題解決。為什么發布后會使用默認的端口？

這里有一點需要注意，在post的代碼並沒有改變的情況下，還是這樣：

this.$axios.post("/trans",this.model).then( (res) => {...

使用上面的配置，實際post的地址會加上/api，變成http://localhost:4000/api/trans，這個就是我們實際的服務所在了。這個localhost:4000並不是配置上的proxy影響的，實際上新增的proxy：{}節點完全不影響程序的運行。

我測試的組件版本：

"nuxt": "^2.0.0",

"@nuxtjs/axios": "^5.3.6",

"cross-env": "^5.2.0",

"nodemon": "^1.18.9"

 

這有一個對nuxt的大體說明還不錯的： https://www.jianshu.com/p/840169ba92e6