Vue 錯誤 - 無法解析「https」導入套件時

Question

我正在嘗試建立一個 Vue 專案並使用 npm 套件連接到 Retroachievements.org api 以獲取一些數據，但出現錯誤。這是我從開始到結束創建專案和實作包的過程。

• 導航到我的專案資料夾並使用 vue cli 建立專案：vue create test。對於選項，我通常會選擇不包含 linter、vue 版本 2，並將所有內容放在 package.json 中。

• cd 進入 /test 資料夾：cd test 並安裝 Retroachievements npm 套件：npm install --save raapijs

• #將 App.vue 修改為以下內容（對程式碼格式表示歉意，不確定為什麼貼文沒有正確格式化/著色...）：

  const RaApi = require('raapijs');

  匯出預設值{ 名稱：'應用程式'，

  data: () => ({
        api:null,
        user: '<USER_NAME>',
        apiKey: '<API_KEY>',
    }),
  
    created() {
        this.api = new RaApi(this.user, this.apiKey);
    },

  }

• 運行 `npm runserve' 並得到錯誤：

  ./node_modules/raapijs/index.js 2:14-30 中發生錯誤

  找不到模組：錯誤：無法解析「C:\Projects\Web\test\node_modules\raapijs」中的「https」

我使用的是 Windows 10、Node 16.17.0、npm 8.15.0、vue 2.6.14、vue CLI 5.0.8、raapijs 0.1.2。

下面的第一個解決方案說他可以毫無錯誤地運行它，但它看起來與我正在嘗試的程式碼完全相同。任何人都可以看到此錯誤的差異和原因嗎？

編輯：我重寫了這篇文章，以便更清楚地了解我的流程並提供更多信息，例如版本。

Answer 1

這個解決方案適合我。我使用 npm install --save raapijs 指令安裝了 raapijs。然後在我的 Vue 版本 2 元件中我使用了您的程式碼，如下所示：

const RaApi = require('raapijs');

export default {
  
  data: () => ({
    api: null,
    user: '<USER_NAME>',
    apiKey: '<API_KEY>',
  }),
  
   created() {
    this.api = new RaApi(this.user, this.apiKey);
  },
};

Answer 2

看來 raapijs 套件被設計為在 Node 環境中使用，而不是在 Vue 基於瀏覽器的環境中使用，所以這就是我收到錯誤的原因。該包本身正在尋找 Node 中內建的 https 包，但由於它沒有在 Node 中運行，所以沒有找到它。

因此，我透過查看套件的 github 儲存庫並提取正在使用的實際 php API 端點並直接在我的應用程式中使用這些端點來解決我的問題，而不是使用套件包裝器。不像我希望的那麼乾淨整潔，但仍然是一個不錯的解決方案。