npm 或 yarn 使用别名同时安装同一个包的两个版本

以vue为例, 同时安装 vue的2.6版本和 vue的3.2版本
首先分别起名 vue2 和 vue3

npm 安装

## npm 别名安装写法
npm install vue2@npm:vue@^2.6.14
npm install vue3@npm:vue@^3.2.37

yarn 安装

## yarn 别名安装写法
yarn add vue2@yarn:vue@^2.6.14
yarn add vue3@yarn:vue@^3.2.37

这里以 npm 为例,安装完成后可以看到 package.json 已经有两个新的包了

{
  "dependencies": {
    "vue2": "npm:vue@^2.6.14",
    "vue3": "npm:vue@^3.2.37"
  }
}

这样项目里就同时有2个版本的vue了, 都可以直接在项目内使用了

代码引入使用示例

// demo.js
import Vue from 'vue2'
import { createApp, reactive } from 'vue3'

// vue2 版本创建app
const vue2App = new Vue({
  data() {
    return {
      text: 'Hello World!'
    }
  }
}).$mount('#app2')

// vue3 版本创建app
const vue3App = createApp({
  setup() {
    const state = reactive({
      text: 'Hello World!'
    })
  }
}).mount('#app3')

其他

也可以选择一个普通安装, 一个起别名安装

npm install vue
npm install vue3@npm:vue@^3.2.37

package.json

{
  "dependencies": {
    "vue": "^2.6.14",
    "vue3": "npm:vue@^3.2.37"
  }
}

使用

import vue from 'vue'
import { createApp } from 'vue3