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 端点并直接在我的应用程序中使用这些端点来解决我的问题，而不是使用包包装器。不像我希望的那么干净整洁，但仍然是一个不错的解决方案。