Vue2.6+vue/cli 至 Vite 问题记录

328 阅读2分钟

头号反贼 ReferenceError: Cannot access ‘...‘ before initialization

确实有相关 issues
但是如果代码实在是有问题,那么 issues 提出的配置 也无法帮助项目避免这个错误 遇见这个问题,还是需要冷静下来,根据报错的提示文件,去一点点剖析各个模块引入的关系,通过注释或者关系整理是能够处理掉这个问题的。

问题一: 仓库(store)中的所有调用全部错误,找不到该内容

一点要注意 namespace (命名空间是否开启)

二点是统一引入时路径命名错误,这个就需要通过调整正则匹配去解决

问题二: 组件引入注册(require => import)

这个写法也是不同的,vite 本身似乎不支持require 要注意的是import的写法 引入组件的写法: () => import('url')

import 是异步的,怎么把他同步处理,我也不太清楚

问题三: 这个不是很严重, alias 配置的时候需要注意

替换的真实路径前最好加上 ./ 不加的话也不会有什么大问题 这是Vite的规范 忘记在哪看的了

问题四: 对于JSX也没什么特殊的地方,添加插件,为script标签添加lang就可以处理掉

问题五: qrcodejs2的报错,这个也好处理,换成qrcodejs2-fix就好了

问题六: 针对一些组件的导出导入报错,尝试换几种写法就好了,实在不行就require配插件

问题七: 针对scss样式在js中报错的问题,这个需要为 .scss 文件设置为 .module.scss

我是新增了一个文件 .module.scss,将原始 .scss 文件引入并暴漏

问题八: 省略了文件后缀名导致找不到文件的错误,配置上 extensions 即可,但是需要注意数组中的顺序

如果一个文件下存在不同的同名不同后缀名的文件,也会报错的,这种情况最好还是去改一下后缀名 还有,有些人会喜欢把index也省略了,这样可能也会存在问题

问题还有很多,目前只是简单的跑了起来,很烦..

20240112午