webpack改造成vite

项目框架是vue-element-admin，打包工具为webpack，后由于系统功能增加，启动时间随之变长，遂引入vite打包工具，优化项目启动，缩短时间。下面是改造期间遇到的一些问题和bug，记录下来供后续参考。

依赖版本问题

# 安装vite和@vitejs/plugin-vue，node版本需要16以上
npm install -S vite@5.4.9
npm install -S @vitejs/plugin-vue

# vuedraggable中报错Object is not a function
# vite不兼容vuedraggable高版本，适当降低一下vuedraggable版本
npm install -S vuedraggable@2.24.3

# vite不允许客户端访问nodejs内置模块，比如path、fs等，安装path-browserify
npm install -S path-browserify@1.0.1

# 使用sass^1.66.1 报警告 Deprecation Warning: $weight: Passing a number without unit % (0) is deprecated. 当然不止这些，很多警告，不过不影响项目运行，如果实在膈应可以试着去降低sass的版本

# 报错：ReferenceError: React is not defined
# vue中无法识别出jsx语法，安装依赖@vitejs/plugin-vue-jsx
npm install -S @vitejs/plugin-vue-jsx@4.0.1

文件改动

1. 从public文件夹中移动index.html至根目录，并显式的引用入口文件main.js

<script type="module" src="/src/main.js"></script>

2. vite默认支持ESM方式加载模块，不包含require相关方法，store/index.js文件中在批量获取文件名时存在require方法未定义的报错

# ReferenceError: require is not defined
# 原方法
const modulesFiles = require.context('./modules', true, /.js$/);

# 使用vite内置方法，eager为true的作用是同步加载匹配到的文件，而不是默认的异步加载
const moduleFiles = import.meta.glob('./modules/*.js', {eager: true});

# 注意原方法里返回的是js文件名，vite方法返回的是包含/modules路径/js文件名

3. 修改环境变量的定义前缀和引用

VUE_APP => VITE_
process.env => import.meta.env