解决Vite+Vue+Ts项目中的unplugin-vue-components自动导入插件引起的Vite重新加载问题

一、描述

一直以来都在使用 Vue3 + Element Plus 开发，Element Plus 支持完整引入、按需导入、手动导入的方式，三种方式对于ts属性的提示有差别

1、完整引入方式

可以看到 el-button 没有被高亮显示，ts没有识别到组件的类型

2、按需导入方式

现在使用自动导入插件，可以看到组件类型被识别到了

3、手动导入方式

手动引入组件类型也能被识别，但是需要在每个页面都import一遍，如果页面组件使用的特别多，那么import很多之后在搭配格式化，一个import导入就展示很长的代码行数。

所以，我也一直在使用自动导入插件来完成组件的自动导入，这样既不用手动import，也能有ts的组件类型提示，但是自动导入的插件存在一个问题。

二、自动导入存在的问题

当vite启动后，打开页面时候，自动导入插件就会分析当前页面用到的组件依赖，并且帮你完成组件的自动导入，现在想象一个场景，比如

现在有2个页面，页面1和页面2，我们启动项目后打开的页面是页面1，页面2等待手动点击菜单路由跳转后会展示，假如页面1中使用到了el-button、el-form，页面2使用了页面1中没有的组件 el-table、el-tree等。此时页面1因为被打开了，所以插件会完成自动导入，但是当我们切换到页面2时候，里面的新组件并没有被加载过，此时自动导入插件会加载新的组件，这时就会触发vite reload

页面1

可以看到，当访问页面1的时候，自动导入加载了页面中使用的组件，组件也全部高亮显示了

页面2

接下来把网络调到3G，然后访问页面2

可以看到，页面2中的组件也被加载了，但是加载有个问题，我加载页面2的组件却触发了整个页面的刷新，vite去加载了新依赖，页面处于白屏状态，如果项目中有loading的话，此时应该是一直在处理loading状态。

每次启动vite进行路由切换时候，如果新路由中有新依赖，就要重新加载页面，切一次路由白屏一次，这显然这很影响我们的开发体验。

三、解决方法

既然自动导入存在这个问题，但是完整引入并没有这个问题，那我们能不能让vite在开发环境下进行完整引入，在生产环境下再使用自动导入插件进行自动导入呢？

1、实现过程1

在src目录下新增 as-needed.ts 和 global-imports.ts 文件

as-needed.ts

import type { App, Plugin } from 'vue'

const installer: Plugin = {
  install(_app: App) {},
}

export default installer

global-imports.ts

import type { App, Plugin } from 'vue'
import ElementPlus from 'element-plus/es'
import 'element-plus/theme-chalk/src/index.scss'

const installer: Plugin = {
  install(app: App) {
    app.use(ElementPlus)
  },
}

export default installer

2、实现过程2

修改 vite.config.ts 配置

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, PluginOption } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig(({ command }) => {
  const isBuild = command === 'build'

  const plugins: PluginOption[] = [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
  ]
  const alias: Record<string, any> = {
    '@': fileURLToPath(new URL('./src', import.meta.url)),
  }

  // 如果isBuild 为true说明此时为生产环境
  if (isBuild) {
    // 生产环境下在进行按需引入
    plugins.push(Components({
      resolvers: [ElementPlusResolver()],
    }))
  } else {
    // 开发环境下进行全局安装，这里是重点
    alias['./as-needed'] = './global-imports'
    
    // 如果是自定义的组件也想通过自动导入插件进行导入
    // 比如这是我项目中的配置
    //   plugins.push(Components({
    //    dirs: ["src/views/**/components", "src/components"],
    //    dts: resolve("src", "types", "my-components.d.ts"),
    //    resolvers: [],
    //  }))
  }

  return {
    base: '',
    plugins,
    resolve: {
      alias,
    },
  }
})

3、实现过程3

修改 main.ts 文件

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import installer from './as-needed'

const app = createApp(App)

app.use(createPinia())
// use刚才的as-needed中导出的installer，因为开发环境中会把./as-needed转换为./global-import'
// 也就是刚才在vite.config.ts里配置的
app.use(installer)
app.use(router)

app.mount('#app')

4、最终步骤

最后需要手动添加一下类型声明文件,在src/types下创建一个el-components.d.ts文件,并且在tsconfig里includes文件目录 "src/types/*.d.ts"

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}

declare module "vue" {
  export interface GlobalComponents {
    ElAffix: (typeof import("element-plus"))["ElAffix"]
    ElAlert: (typeof import("element-plus"))["ElAlert"]
    ElAside: (typeof import("element-plus"))["ElAside"]
    ElAutocomplete: (typeof import("element-plus"))["ElAutocomplete"]
    ElAvatar: (typeof import("element-plus"))["ElAvatar"]
    ElAnchor: (typeof import("element-plus"))["ElAnchor"]
    ElAnchorLink: (typeof import("element-plus"))["ElAnchorLink"]
    ElBacktop: (typeof import("element-plus"))["ElBacktop"]
    ElBadge: (typeof import("element-plus"))["ElBadge"]
    ElBreadcrumb: (typeof import("element-plus"))["ElBreadcrumb"]
    ElBreadcrumbItem: (typeof import("element-plus"))["ElBreadcrumbItem"]
    ElButton: (typeof import("element-plus"))["ElButton"]
    ElButtonGroup: (typeof import("element-plus"))["ElButtonGroup"]
    ElCalendar: (typeof import("element-plus"))["ElCalendar"]
    ElCard: (typeof import("element-plus"))["ElCard"]
    ElCarousel: (typeof import("element-plus"))["ElCarousel"]
    ElCarouselItem: (typeof import("element-plus"))["ElCarouselItem"]
    ElCascader: (typeof import("element-plus"))["ElCascader"]
    ElCascaderPanel: (typeof import("element-plus"))["ElCascaderPanel"]
    ElCheckbox: (typeof import("element-plus"))["ElCheckbox"]
    ElCheckboxButton: (typeof import("element-plus"))["ElCheckboxButton"]
    ElCheckboxGroup: (typeof import("element-plus"))["ElCheckboxGroup"]
    ElCol: (typeof import("element-plus"))["ElCol"]
    ElCollapse: (typeof import("element-plus"))["ElCollapse"]
    ElCollapseItem: (typeof import("element-plus"))["ElCollapseItem"]
    ElCollapseTransition: (typeof import("element-plus"))["ElCollapseTransition"]
    ElColorPicker: (typeof import("element-plus"))["ElColorPicker"]
    ElContainer: (typeof import("element-plus"))["ElContainer"]
    ElConfigProvider: (typeof import("element-plus"))["ElConfigProvider"]
    ElDatePicker: (typeof import("element-plus"))["ElDatePicker"]
    ElDialog: (typeof import("element-plus"))["ElDialog"]
    ElDivider: (typeof import("element-plus"))["ElDivider"]
    ElDrawer: (typeof import("element-plus"))["ElDrawer"]
    ElDropdown: (typeof import("element-plus"))["ElDropdown"]
    ElDropdownItem: (typeof import("element-plus"))["ElDropdownItem"]
    ElDropdownMenu: (typeof import("element-plus"))["ElDropdownMenu"]
    ElEmpty: (typeof import("element-plus"))["ElEmpty"]
    ElFooter: (typeof import("element-plus"))["ElFooter"]
    ElForm: (typeof import("element-plus"))["ElForm"]
    ElFormItem: (typeof import("element-plus"))["ElFormItem"]
    ElHeader: (typeof import("element-plus"))["ElHeader"]
    ElIcon: (typeof import("element-plus"))["ElIcon"]
    ElImage: (typeof import("element-plus"))["ElImage"]
    ElImageViewer: (typeof import("element-plus"))["ElImageViewer"]
    ElInput: (typeof import("element-plus"))["ElInput"]
    ElInputNumber: (typeof import("element-plus"))["ElInputNumber"]
    ElLink: (typeof import("element-plus"))["ElLink"]
    ElMain: (typeof import("element-plus"))["ElMain"]
    ElMenu: (typeof import("element-plus"))["ElMenu"]
    ElMenuItem: (typeof import("element-plus"))["ElMenuItem"]
    ElMenuItemGroup: (typeof import("element-plus"))["ElMenuItemGroup"]
    ElOption: (typeof import("element-plus"))["ElOption"]
    ElOptionGroup: (typeof import("element-plus"))["ElOptionGroup"]
    ElPageHeader: (typeof import("element-plus"))["ElPageHeader"]
    ElPagination: (typeof import("element-plus"))["ElPagination"]
    ElPopconfirm: (typeof import("element-plus"))["ElPopconfirm"]
    ElPopper: (typeof import("element-plus"))["ElPopper"]
    ElPopover: (typeof import("element-plus"))["ElPopover"]
    ElProgress: (typeof import("element-plus"))["ElProgress"]
    ElRadio: (typeof import("element-plus"))["ElRadio"]
    ElRadioButton: (typeof import("element-plus"))["ElRadioButton"]
    ElRadioGroup: (typeof import("element-plus"))["ElRadioGroup"]
    ElRate: (typeof import("element-plus"))["ElRate"]
    ElRow: (typeof import("element-plus"))["ElRow"]
    ElScrollbar: (typeof import("element-plus"))["ElScrollbar"]
    ElSelect: (typeof import("element-plus"))["ElSelect"]
    ElSlider: (typeof import("element-plus"))["ElSlider"]
    ElStep: (typeof import("element-plus"))["ElStep"]
    ElSteps: (typeof import("element-plus"))["ElSteps"]
    ElSubMenu: (typeof import("element-plus"))["ElSubMenu"]
    ElSwitch: (typeof import("element-plus"))["ElSwitch"]
    ElTabPane: (typeof import("element-plus"))["ElTabPane"]
    ElTable: (typeof import("element-plus"))["ElTable"]
    ElTableColumn: (typeof import("element-plus"))["ElTableColumn"]
    ElTabs: (typeof import("element-plus"))["ElTabs"]
    ElTag: (typeof import("element-plus"))["ElTag"]
    ElText: (typeof import("element-plus"))["ElText"]
    ElTimePicker: (typeof import("element-plus"))["ElTimePicker"]
    ElTimeSelect: (typeof import("element-plus"))["ElTimeSelect"]
    ElTimeline: (typeof import("element-plus"))["ElTimeline"]
    ElTimelineItem: (typeof import("element-plus"))["ElTimelineItem"]
    ElTooltip: (typeof import("element-plus"))["ElTooltip"]
    ElTransfer: (typeof import("element-plus"))["ElTransfer"]
    ElTree: (typeof import("element-plus"))["ElTree"]
    ElTreeV2: (typeof import("element-plus"))["ElTreeV2"]
    ElTreeSelect: (typeof import("element-plus"))["ElTreeSelect"]
    ElUpload: (typeof import("element-plus"))["ElUpload"]
    ElSpace: (typeof import("element-plus"))["ElSpace"]
    ElSkeleton: (typeof import("element-plus"))["ElSkeleton"]
    ElSkeletonItem: (typeof import("element-plus"))["ElSkeletonItem"]
    ElStatistic: (typeof import("element-plus"))["ElStatistic"]
    ElCountdown: (typeof import("element-plus"))["ElCountdown"]
    ElCheckTag: (typeof import("element-plus"))["ElCheckTag"]
    ElDescriptions: (typeof import("element-plus"))["ElDescriptions"]
    ElDescriptionsItem: (typeof import("element-plus"))["ElDescriptionsItem"]
    ElResult: (typeof import("element-plus"))["ElResult"]
    ElSelectV2: (typeof import("element-plus"))["ElSelectV2"]
    ElWatermark: (typeof import("element-plus"))["ElWatermark"]
    ElTour: (typeof import("element-plus"))["ElTour"]
    ElTourStep: (typeof import("element-plus"))["ElTourStep"]
    ElSegmented: (typeof import("element-plus"))["ElSegmented"]
    ElMention: (typeof import("element-plus"))["ElMention"]
  }
}

关于Element Plus的所有类型声明文件来自于 github.com/element-plu…

做完上面这些之后我们就完成了在开发环境下全局导入并且支持组件类型，生产环境下自动导入插件按需导入的配置。

测试一下

先删除掉 node_modules 下的 .vite 文件夹和 components.d.ts 文件，然后启动项目,切换页面1和页面2

可以看到切换页面时候，没有触发依赖的重新加载，也不会出现整个页面重新刷新，资源重新加载的问题，同时组件的类型也完美展示出来，优化了开发体验

四、总结

通过vite中的alias配置让我们在开发环境下，将./as-needed转到./global-imports，global-imports里对Element Plus进行了完整引入，同时声明了el-components.d.ts来解决完整引入时候组件没有类型的问题。

❀ 完结撒花，感谢阅读 ❀