遇到问题

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

  1. 第一个问题：
    直接使用默认的声明文件生产位置（和src同级），此时src下面的所有vue文件无法读取到声明文件，ts代码提示会有报错，但是不会出现page reload 和浏览器刷新问题

vite+vue3+ts+pinia+element-plus搭建项目（五） - 图1
配置如下

  1. export default defineConfig({
  2.   plugins: [
  3.     vue(),
  4.     AutoImport({
  5.       imports: ['vue', 'vue-router'],
  6.       resolvers: [ElementPlusResolver()]
  7.     }),
  8.     Components({
  9.       resolvers: [ElementPlusResolver()]
  10.     })
  11.   ]
  12. })

解决办法

只需要在tsconfig.json 里面加一个配置

  1. {
  2.   "include": [
  3.     "src/**/*.ts",
  4.     "src/**/*.d.ts",
  5.     "src/**/*.tsx",
  6.     "src/**/*.vue",
  7.     "./**/*.d.ts"  // 加这一行，让ts读取到和src同级的声明文件
  8.   ],
  9. }
  1. 第二个问题
    在上面第一个问题出来后，我选择了修改默认声明文件的位置，不是和src同级而是在src里面生产，这样就可以直接读取到声明文件
    问题来了!!!
    这个时候只要你修改任何一行代码哪怕是加个空格,终端都会打印如下信息，浏览器就刷新了，hmr功能没有了，开发效率大打折扣
    1. hmr update /src/page/login/Index.vue?vue&type=style&index=0&scope=true&lang.scss
    2. hmr update /src/styles/index.scss
    3. 14:33:04 [vite] page reload src/auto-imports.d.ts
    1. export default defineConfig({
    2. plugins: [
    3.  vue(),
    4.  AutoImport({
    5.    imports: ['vue', 'vue-router'],
    6.    dts: resolve(__dirname, 'src/auto-imports.d.ts'),
    7.    resolvers: [ElementPlusResolver()]
    8.  }),
    9.  Components({
    10.    resolvers: [ElementPlusResolver()],
    11.    dts: resolve(__dirname, 'src/global-components.d.ts')
    12.  })
    13. ]
    14. })