nuxt.js專案部署到生產環境時其中後端介面寫外網地址不行的問題

最近寫nuxt.js專案部署到生產環境遇到了各種各樣的問題。

這篇文章要寫的就是部署到生產環境時呼叫後端的介面寫外網地址不行的問題及解決方案：

使用pm2手動部署到生產環境，其中呼叫後端的介面外網地址是http://192.144.164.39:****/zhizihua。

但是使用pm2手動啟動專案之後，可以啟動，但是頁面總是會跳到錯誤提示頁面（用於介面有時無資料或呼叫出錯時展示的頁面），首先想到的就是兩個原因：

一、介面無資料。去後臺新增了資料，但是直接在輸入http://anchors.xsn.com.cn/anchor/menu?id=78    返回下圖所示錯誤：

解決思路：

1、在本地連線上生產伺服器，curl http://localhost:3000/anchor/menu?id=78    也是返回這個錯誤。

2、在anchor.js中寫了一個本地介面；直接返回一個json, curl http://localhost:3000/anchor/aa 可以返回正確的結果。這樣就清楚了，應該是在proxy代理的時候出問題了。可是看了我的nuxt.config.js也沒問題啊

modules: [
    // Doc: https://github.com/nuxt-community/axios-module#usage
    ["@nuxtjs/axios",
      {
        // baseURL: process.env.BASE_URL || 'http://localhost:3000',
      }
    ],
    '@nuxtjs/proxy'
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    withCredentials: true,
    baseURL: conf.axiosBaseUrl,
    // proxy: true,
  },
  proxy: {
    "/anchor": {
      target: conf.backBaseUrl,
      changeOrigin: true,
      pathRewrite: {
        "^/anchor": ""
      }
    },

3、修改外網地址為內網地址：http://172.21.16.3:****/zhizihua    （172.21.16.3為內網IP）,最後通過npm run build    npm run pm2居然可以了。但是我仍然不知道是什麼原因，各位大佬知道是什麼原因嗎？？

二、在nuxt.js的issus中搜尋說配置一下 firebase,程式碼如下：

build: {
    transpile: [/^element-ui/],
    extend(config, {
      isDev,
      isClient,
      isServer
    }) {
      if (isServer) {
        config.externals = {
          '@firebase/app': 'commonjs @firebase/app',
          '@firebase/firestore': 'commonjs @firebase/firestore',
          //etc...
        }
      }
    },
    
    cache: true
  },

可是我這樣配置了，也安裝了@firebase/app    @firebase/firestore 這兩個依賴，依然不行。github連結為：https://github.com/nuxt/now-builder/issues/41

解決方案為：

可是這個在我的專案中不起作用。

三、終級解決方案：

最後還是通過改外網地址為內網地址才得以解決。

if (process.env.NODE_ENV === 'development') {
  BASE_URL = 'http://140.143.34.237:****/zhizihua'
  axiosBaseUrl = 'http://localhost:3000'
  backBaseUrl = 'http://140.143.34.237:****/'
} else if (process.env.NODE_ENV === 'production') {
  // BASE_URL = 'http://192.144.164.39:****/zhizihua'
  BASE_URL = 'http://172.21.16.3:****/zhizihua'  //改192.144.164.39:****為內網172.21.16.3:****
  axiosBaseUrl = 'http://anchors.xsn.com.cn'
  backBaseUrl = 'http://172.21.16.3:****/'

} else if (process.env.NODE_ENV === 'test') {
  BASE_URL = 'http://140.143.34.237:****/zhizihua'
  axiosBaseUrl = 'http://xuexi.xsn.com.cn'
  backBaseUrl = 'http://140.143.34.237:****/'
}