Kongsi langkah terperinci untuk memasang dua versi kebergantungan yang berbeza dalam projek Vue

Dalam projek Vue, versi kebergantungan yang berbeza mungkin perlu dipasang. Contohnya, anda menggunakan pustaka komponen Vue dalam projek anda dan beberapa komponen pustaka komponen ini memerlukan versi Vue 2.x, manakala projek anda menggunakan versi Vue 3.x. Pada masa ini, anda perlu memasang dua versi Vue yang berbeza dalam projek pada masa yang sama.

Berikut ialah langkah terperinci tentang cara memasang dua versi kebergantungan yang berbeza dalam projek Vue:

1. Laksanakan arahan berikut dalam direktori akar projek untuk memasang benang modul npm:

npm install -g yarn

2. Laksanakan arahan berikut dalam direktori akar projek untuk memulakan projek:

yarn init

3. Buat yang baharu bernama packages dalam direktori akar projek Folder yang digunakan untuk menyimpan kod sumber bergantung.
4. Buat dua subdirektori baharu packages dan vue2 di bawah direktori vue3, yang digunakan untuk memasang kebergantungan Vue 2.x dan Vue 3.x masing-masing.
5. Masukkan direktori vue2 dan laksanakan arahan berikut untuk memasang kebergantungan Vue 2.x:

yarn add vue@2.x.x

Di mana, 2.x.x ialah Vue 2.x versi yang anda perlukan untuk memasang Number.

6. Masukkan direktori vue3 dan laksanakan arahan berikut untuk memasang kebergantungan Vue 3.x:

yarn add vue@^3.0.0

Di mana, ^3.0.0 ialah Vue 3 anda perlu memasang nombor versi .x.

7. Tambah kod berikut dalam fail package.json dalam direktori akar projek untuk mengkonfigurasi alias laluan modul:

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "modules": {
    "vue2": {
      "paths": [
        "packages/vue2/node_modules"
      ]
    },
    "vue3": {
      "paths": [
        "packages/vue3/node_modules"
      ]
    }
  }
}

di mana, vue2 dan vue3 ialah nama direktori tempat anda memasang Vue 2.x dan Vue 3.x.

8. Buat fail vue.config.js baharu dalam direktori akar projek dan tambah kod berikut:

module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias
      .set('vue', 'vue2')
      .set('vue3', 'vue') 
  },
}

Antaranya, konfigurasi set('vue', 'vue2') adalah untuk menetapkan laluan lalai Vue Direktori tempat Vue 2.x dipasang.

Konfigurasi set('vue3', 'vue') ialah untuk menetapkan laluan Vue 3.x ke direktori vue3.

Dengan cara ini, apabila anda merujuk Vue dalam komponen, Webpack akan mencari versi pergantungan Vue yang sepadan berdasarkan laluan alias yang dikonfigurasikan.

9. Rujuk versi berbeza kebergantungan Vue dalam komponen seperti berikut:

import Vue2 from 'vue2'
import Vue3 from 'vue3'

Pada ketika ini, anda telah berjaya memasang dua versi berbeza dalam pergantungan projek Vue. Apabila anda perlu menggunakan ciri Vue 2.x dan Vue 3.x dalam komponen, anda hanya perlu merujuk versi kebergantungan yang sepadan seperti di atas.

Atas ialah kandungan terperinci Kongsi langkah terperinci untuk memasang dua versi kebergantungan yang berbeza dalam projek Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!