《vue2 vue3共存》

一、解决方案

在项目中实现Vue2和Vue3共存，可以通过将不同的模块或页面分别基于Vue2或Vue3构建。利用微前端的思想，把Vue2项目和Vue3项目视为两个独立的子应用，在主应用中根据路由等规则加载对应的子应用。

二、通过webpack配置实现共存

1. 创建子应用

创建Vue2和Vue3的项目。对于Vue2项目：

bash
vue create vue2 -app


对于Vue3项目：

bash
vue create vue3 - app

选择对应版本的相关配置。

然后修改它们的public/index.html中的标题等信息以示区分。

2. 配置主应用

安装qiankun作为微前端框架来管理子应用。

在主应用的webpack.config.js中（如果是使用create - react - app等脚手架，可能需要使用自定义配置插件）：

javascript
const { name } = require('./package.json');
const webpack = require('webpack');</p>

<p>module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        MAIN<em>APP</em>NAME: JSON.stringify(name),
      },
    }),
  ],
  output: {
    library: <code>${name}-[name],
    libraryTarget: 'umd',
    jsonpFunction: webpackJsonp_${name},
  },
};

在主应用的入口文件src/main.js：

javascript
import microApp from '@micro-zoe/micro-app';
import Vue from 'vue';
import App from './App.vue';</p>

<p>microApp.start();</p>

<p>new Vue({
  render: (h) => h(App),
}).$mount('#app');

同时在src/App.vue中编写路由逻辑来加载不同子应用：

vue

  <div id="app">
    Vue2
    Vue3
    
    
  </div>
</p>


export default {
  watch: {
    $route(to) {
      if (to.path.startsWith('/vue2')) {
        document.querySelector('micro-app[name="vue3"]').remove();
        if (!document.querySelector('micro-app[name="vue2"]')) {
          const microApp2 = document.createElement('micro-app');
          microApp2.setAttribute('name', 'vue2');
          microApp2.setAttribute('url', 'http://localhost:8081');
          microApp2.setAttribute('baseroute', '/vue2');
          document.getElementById('app').appendChild(microApp2);
        }
      } else if (to.path.startsWith('/vue3')) {
        document.querySelector('micro-app[name="vue2"]').remove();
        if (!document.querySelector('micro-app[name="vue3"]')) {
          const microApp3 = document.createElement('micro-app');
          microApp3.setAttribute('name', 'vue3');
          microApp3.setAttribute('url', 'http://localhost:8082');
          microApp3.setAttribute('baseroute', '/vue3');
          document.getElementById('app').appendChild(microApp3);
        }
      }
    },
  },
};


<p>

三、在同一页面嵌套局部组件的方式

如果不需要复杂的微前端架构，只是想在某个页面局部区域共存Vue2和Vue3组件。可以使用iframe简单实现。

例如在一个Vue2项目的页面中嵌入Vue3组件：

html</p>

<div id="app">
  <!-- Vue2组件 -->
  
  <!-- 嵌入Vue3组件 -->
  
</div>

<p>

当然这种方式有一定的局限性，比如样式可能会相互影响，并且父子组件间的通信会比较麻烦。

以上就是在项目中实现Vue2和Vue3共存的一些思路，可以根据实际项目需求选择合适的方法。