遇到问题
在搭建完成正常开发的时候，也不知道在那个配置出了问题，每次一修改代码，保存vite都会重新reload，浏览器也会重新刷新，没有了热更新
测试了好久发现问题出在 unplugin-auto-import 和 unplugin-vue-components 这两个插件
-
第一个问题：
直接使用默认的声明文件生产位置（和src同级），此时src下面的所有vue文件无法读取到声明文件，ts代码提示会有报错，但是不会出现page reload 和浏览器刷新问题
image.png
配置如下
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'],
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
})
解决办法
这个解决方法我真的试出来后把自己都整笑了，居然这么容易就好了，只需要在tsconfig.json 里面加一个配置
{
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue",
"./**/*.d.ts" // 加这一行，让ts读取到和src同级的声明文件
],
}
上面这个问题，如果一开始我就按照默认配置去整应该没有这么麻烦，我主要想说的是下面的这个问题
- 第二个问题
在上面第一个问题出来后，我选择了修改默认声明文件的位置，不是和src同级而是在src里面生产，这样就可以直接读取到声明文件
问题来了!!!
这个时候只要你修改任何一行代码哪怕是加个空格,终端都会打印如下信息，浏览器就刷新了，hmr功能没有了，开发效率大打折扣
hmr update /src/page/login/Index.vue?vue&type=style&index=0&scope=true&lang.scss
hmr update /src/styles/index.scss
14:33:04 [vite] page reload src/auto-imports.d.ts
配置如下
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: ['vue', 'vue-router'],
dts: resolve(__dirname, 'src/auto-imports.d.ts'),
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()],
dts: resolve(__dirname, 'src/global-components.d.ts')
})
]
})
这个问题没有解决方案，我测试了很多次都不行，但是如果重新创建一个项目，配置了dts 又是可以实现的，这个可能是我这边依赖项很多有冲突，具体还没有找到，找到再记录一下，或者有相同经历的可以分享一下
