最近在迁移一个很多年的旧项目，webpack编译很慢，就迁移到了vite，加快了编译速度，于此同时，遇到很多vite3与vue2及其他框架不兼容的问题，下面会一一列举出来。vue3不再需要vue2的data和methods，而是提供了setup函数，按目前项目来讲，项目由vue2转vue3可行但难度不小，把optionApi的methods中抽离成compositionApi的hook，把data用...toRefs转成普通对象，还有一些以前vue2怪异用法增加了难度，所以当前只使用了vite3+vue2。下面是迁移后一些框架兼容问题：

版本：vite@3.0.7 ，vue@2.5.21，element-ui@2.15.6， core-js@3.24.1， vite-plugin-html@3.2.0，vite-plugin-vue2@2.0.2，vue-template-compiler@2.5.21

1、xlsx-style的问题

Can't resolve './cptable' in '**\node_modules\xlsx-style\dist'

解决方案：

1、cpexcel.js 的807行 var cpt = require('./cpt' + 'able') 改为 var cpt = require('./cpexcel');

2、xlsx.js中var current_codepage = 1200, current_cptable;加上一个cptable;即var current_codepage = 1200, current_cptable, cptable;

可以用我改好的npm install xlsx-style-hzx

2、qrcodejs2出现的问题

this._android && this._android <=2.1 出现的问题

解决方案：

1、改成this && this._android <=2.1即可，把前面的_android去掉

可以用我改好的npm install qrcodejs_hzx

3、css、sass中的深层/deep/、>>>问题

不能使用/deep/ 、>>>这种css的深层方式了

要全部改为 ::v-deep，记得在::v-deep后面加上空格，这是必须的，不然编译失败

4、require引入图片的问题

require是commonjs的模块化方案，支持动态引入，但vite不支持require

解决方案：

把require('/image/logo.png') 改为 new URL('/image/logo.png', import.meta.url).href；

还有依赖引入由 const x = require('x') 改为 import x from 'x'

5、vite引入antv/g2出现的lineStyle问题处理 Cannot create property 'lineStyle' on boolean 'false'" 和 Cannot create property 'lineStyle' on boolean 'false'，这个问题困扰了我一周，后来直接拿antv/g2的案例放下来居然成功，那就是代码有问题，解决方案如下

改成vite后，旧案例都会报上面这两个错误，当然我都没有去看完整的antv/g2文档，只是引进了一个案例，然而新引进的案例能够完整展示，就一个一个排除解决了，网上都找不到答案，看这里就行

旧项目的代码：

chart.tooltip(true, { crosshairs: { type: 'line' }})

改为：

chart.tooltip(true, { crosshairs: true})

6、vite@3.0.7 + vue@2.6.17 + element-ui@2.15.6存在列表table不显示的问题

解决方案：

1、安装element-ui@2.15.6： npm install element-ui@2.15.6

2、安装element-ui-hzx： npm install element-ui-hzx

3、按需引入element-ui的时候，不要引入Table, TableColumn，这两个从element-ui-hzx引入，代码如下：

下面的代码都要引入，我已经在./element-ui中按需引入了element-ui所需的组件，去官网找一下就有

//element-ui2.15.6

import './element-ui';

import "element-ui/lib/theme-chalk/index.css";

//element-ui-hzx

//table.css和 table-column.css用 element-ui-hzx的；

import {Table, TableColumn} from 'element-ui-hzx'

import "element-ui-hzx/lib/theme-default/table.css"; 

import "element-ui-hzx/lib/theme-default/table-column.css";

Vue.use(Table);

Vue.use(TableColumn);

7、文件引入的后缀问题

在vite.config的resolve中添加以下代码：

extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],

同时，也会出现process问题。在vite.config中添加以下代码：

define: { 'process.env': { __ENV_OBJECT: env_object,},},

8、index.html中不在需要mian.js，要删除

在vite.config中添加：

import { createVuePlugin } from 'vite-plugin-vue2';

import { createHtmlPlugin } from 'vite-plugin-html';

plugins: [ createVuePlugin(), createHtmlPlugin({ entry: 'src/main.js', inject: { data: { title: '', }, }, }), ...plugins,],