背景：手里有一个react项目一直用webpack进行打包，因为项目十分庞大导致每次更改都需要等待很长时间，导致在开发时浪费了很长时间。因为最近接触了一个大项目用vite本地开发，体验非常好，所以花了点时间将这个大项目的本地构建变更成vite。在这个过程中遇到了一些问题，在此记录一下。

1.Inline JavaScript is not enabled

错误的大概意思是不允许行内写js
解决方式vite.config.js文件中增加：

css: 
    { 
        preprocessorOptions: { 
            less: { 
                    javascriptEnabled: true,
                    additionalData: '@root-entry-name: default;',
                 },
         },
    },

2.variable @ant-prefix is undefined

ant-prefix的变量没有定义找不到，查看webpack配置，发现这个变量是在webpack中写入的，所以，在vite配置文件中，我们增加相关配置

css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import (reference) "${resolve('变量less文件地址')}";`,
          },
        }
      }
    },
}

3.引入其他组件使用less 无法识别@import ~别名

解决方式 vite.config.js文件中增加配置

resolve: {
    alias: [
      { find: /^~/, replacement: '' }
    ],
}

4.浏览器疯狂报错 看样子是react相关的错误

这个错误报的相当抽象，导致我排查了好几天，最后发现是动态导入组件导致的，不能使用react-loadable这个懒加载库，替换成了@loadable/component，缺点是loading组件没有了，因为@loadable/component不支持。