Ralat Vue - Tidak dapat menyelesaikan 'https' semasa mengimport pakej

Question

Saya cuba mencipta projek Vue dan menggunakan pakej npm untuk menyambung ke api Retroachievements.org untuk mendapatkan beberapa data, tetapi saya mendapat ralat. Ini adalah proses saya dari awal hingga akhir untuk membuat projek dan melaksanakan pakej.

• Navigasi ke folder projek saya dan buat projek menggunakan vue cli: vue create test. Untuk pilihan, saya biasanya memilih untuk tidak memasukkan linter, vue versi 2 dan meletakkan semuanya dalam package.json.

• cd ke dalam folder /test: cd test 并安装 Retroachievements npm 包：npm install --save raapijs

• Ubah suai App.vue kepada yang berikut (maaf atas pemformatan kod, tidak pasti mengapa siaran tidak diformat/berwarna dengan betul...):

  const RaApi = memerlukan('raapijs');

  Eksport nilai lalai{ Nama: 'Permohonan',

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

  }

• Jalankan `npm runserve' dan dapatkan ralat:

  Ralat dalam

  ./node_modules/raapijs/index.js 2:14-30

  Modul tidak ditemui: Ralat: Tidak dapat menyelesaikan 'https' dalam 'C:ProjectsWebtestnode_modulesraapijs'

Saya menggunakan Windows 10, Node 16.17.0, npm 8.15.0, vue 2.6.14, vue CLI 5.0.8, raapijs 0.1.2.

Penyelesaian pertama di bawah mengatakan dia boleh menjalankannya tanpa ralat, tetapi ia kelihatan sama seperti kod yang saya cuba. Bolehkah sesiapa melihat perbezaan dan punca ralat ini?

EDIT: Saya telah menulis semula siaran ini untuk lebih jelas tentang proses saya dan memberikan lebih banyak maklumat, seperti versi.

Answer 1

Penyelesaian ini berfungsi untuk saya. Saya memasang raapijs menggunakan arahan npm install --save raapijs. Kemudian dalam komponen Vue versi 2 saya, saya menggunakan kod anda seperti ini:

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

Nampaknya pakej raapijs direka untuk digunakan dalam persekitaran Node, bukan dalam persekitaran berasaskan pelayar Vue, jadi itulah sebabnya saya mendapat ralat. Pakej itu sendiri sedang mencari pakej https yang terbina dalam Node, tetapi kerana ia tidak berjalan dalam Node, ia tidak menemuinya.

Jadi saya menyelesaikan masalah saya dengan melihat repositori github pakej dan mengekstrak titik akhir API php sebenar yang digunakan dan menggunakannya secara langsung dalam aplikasi saya dan bukannya menggunakan pembungkus pakej. Tidak kemas dan kemas seperti yang saya inginkan, tetapi masih merupakan penyelesaian yang bagus.