问题以及解决方案
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. 转换工具
里面有一些替换规则, 实际用发现用处不大,主要还是手工更改
11. scss文件中的 ~\@ 引入
使用 alias 别名替换
12. 插件参考
- 参考1:github.com/caoxiemeiha…
- alias问题:githubmemory.com/repo/vitejs…
- 多html配置:github.com/vitejs/vite…
- 虚拟html入口改造:github.com/hex-ci/vite…
- 模块加载顺序:gera2ld.space/posts/scrip…
- globEager用法:www.jianshu.com/p/f427694d6…
- glob用法:github.com/vitejs/vite…
- awesome vite:github.com/vitejs/awes…
- virtual html: github.com/hex-ci/vite…