webpack 项目转成 vite构建踩坑记录

289 阅读1分钟

问题以及解决方案

1. scss 变量注入

注入域名前缀

2. wepack external 去除

不然会找不到依赖

或者使用插件

3. type="module"的执行顺序

默认是 defer,需要修改页面上script的加载顺序,如果有脚本依赖入口脚本,后面的脚本需要改为动态加载,同时设为defer,与module的加载保持一致  

4. require.context需要替换方法

使用import.meta.globEage方法

或者使用插件:github.com/originjs/vi…

5. 多入口文件,需要更改访问模式

使用插件来修改多个路口的别名访问

6. 导入的文件含有cjs模块

需要使用插件来解决,注意:dev与build插件不一致,生产build需要使用rollup的插件

插件:www.shuzhiduo.com/A/kjdwERvOJ…

7. require.ensure

替换写法:jishuin.proginn.com/p/763bfbd5f…  

8. vue compiler 版本

控制台报错,vite warn You are using the runtime-only build,当前使用的是 runtime版本的vue

解决:修改vue的导入别名,设置alias  

9. html后缀文件,导入成esm

自己实现插件:juejin.cn/post/698653…

10. 转换工具

工具:github.com/originjs/we…

工具2:github.com/IndexXuan/v…

里面有一些替换规则, 实际用发现用处不大,主要还是手工更改

11. scss文件中的 ~\@ 引入

使用 alias 别名替换  

12. 插件参考