vite+vue3+ts+pinia+element-plus搭建项目（五）

遇到问题

在搭建完成正常开发的时候，也不知道在那个配置出了问题，每次一修改代码，保存vite都会重新reload，浏览器也会重新刷新，没有了热更新
测试了好久发现问题出在 unplugin-auto-import 和 unplugin-vue-components 这两个插件

1. 第一个问题：
   直接使用默认的声明文件生产位置（和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同级的声明文件
  ],
}

上面这个问题，如果一开始我就按照默认配置去整应该没有这么麻烦，我主要想说的是下面的这个问题

2. 第二个问题
   在上面第一个问题出来后，我选择了修改默认声明文件的位置，不是和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 又是可以实现的，这个可能是我这边依赖项很多有冲突，具体还没有找到，找到再记录一下，或者有相同经历的可以分享一下