Vue项目引入raapijs报错：无法解析'https'模块

问题详情 #

我在创建Vue项目时，尝试用raapijs包连接retroachievements.org API获取数据，但运行项目时出现错误，完整操作流程如下：

• 进入项目文件夹，用Vue CLI创建项目：vue create test，选择无代码检查器、Vue 2版本，所有配置写入package.json
• 进入test目录：cd test，安装raapijs包：npm install --save raapijs
• 修改App.vue内容：

const RaApi = require('raapijs');

export default {
name: 'App',

  data: () => ({
      api:null,
      user: '<USER_NAME>',
      apiKey: '<API_KEY>',
  }),

  created() {
      this.api = new RaApi(this.user, this.apiKey);
  },
}

• 执行npm run serve后报错：

ERROR in ./node_modules/raapijs/index.js 2:14-30
Module not found: Error: Can't resolve 'https' in 'C:\Projects\Web\test\node_modules\raapijs'

我的环境：Windows 10、Node 16.17.0、npm 8.15.0、Vue 2.6.14、Vue CLI 5.0.8、raapijs 0.1.2。有用户称相同代码可正常运行，想知道差异在哪，以及错误原因。

错误原因 #

raapijs是为Node.js后端环境开发的包，它直接依赖Node.js内置的https模块发起网络请求。但Vue项目运行在浏览器环境中，浏览器没有这个Node.js专属的内置模块，所以webpack在打包前端代码时会找不到https模块，抛出上述错误。

那些说代码能正常运行的用户，大概率是在Node.js后端项目中使用这个包，而非前端Vue项目里直接调用。

解决方案 #

方案1：通过后端代理请求（推荐） #

不要在前端直接使用raapijs，而是搭建一个简单的后端服务（比如用Express）：

• 在后端项目中安装raapijs，编写接口调用RetroAchievements API
• 前端Vue项目通过axios/fetch调用自己的后端接口获取数据

这种方式还能避免在前端暴露你的API Key，更安全。

方案2：使用浏览器兼容的方式调用API #

放弃raapijs，直接用axios或fetch调用RetroAchievements的官方REST API，官方文档里有所有接口的调用方式，前端可以直接发起请求（注意API Key不要泄露）。

方案3：为前端添加Node模块Polyfill（不推荐） #

如果一定要在前端用raapijs，需要配置webpack为浏览器环境添加Node模块的polyfill：

1. 安装依赖：npm install node-polyfill-webpack-plugin
2. 在项目根目录创建vue.config.js，添加配置：

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new NodePolyfillPlugin()
    ]
  }
}

但这种方式会增加打包体积，且存在安全风险（API Key暴露在前端），不建议生产环境使用。

内容的提问来源于stack exchange，提问作者blkhwks19