首页 前端知识 vue,使用unplugin-auto-import避免反复import,按需自动引入

vue,使用unplugin-auto-import避免反复import,按需自动引入

2025-03-11 15:03:50 前端知识 前端哥 680 673 我要收藏

项目库:https://github.com/unplugin/unplugin-auto-import
参考:
https://juejin.cn/post/7012446423367024676
https://cloud.tencent.com/developer/article/2236166


背景:
vue3项目中,基本所有页面都会引入vue3框架的api,elementPlus手动引入组件也很麻烦
每个页面都import太繁琐了,有办法可以简化它吗
在这里插入图片描述

用到以下两个插件unplugin-auto-import和unplugin-vue-components


我的项目是vue3+vue-cli+webpack+js(如果是ts,自动导入组件还需要其他配置文件)

  • unplugin-auto-import
    自动识别代码中库或者API的调用,自动导入相应的模块,从而减少了手动导入的工作量,避免反复写import,但这也是按需自动引入,可以减少产物大小,方便很多

    unplugin-auto-import配置项
    imports: 自动导入的库列表,如 vue、vue-router
    dirs: 自动导入的目录
    dts: 生成的类型声明文件路径
    eslintrc: 生成的 ESLint 配置文件选项

    我的配置

    const AutoImport = require('unplugin-auto-import/webpack')
    const Components = require('unplugin-vue-components/webpack')
    const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
    const path = require('path')
    module.exports = defineConfig({
      configureWebpack: {
        plugins: [
          AutoImport({
            imports: ["vue", "vue-router","pinia"],//自动引入vue的ref、onmounted等,无需在页面中重复import
            dirs:['./src/api/modules/**','./src/store/**'],
    

    使用unplugin-auto-import前:

    <script setup>
    import { onMounted, nextTick, reactive, ref } from 'vue'
    import { useRouter } from 'vue-router'
    import { mainStore } from '@/store/pinia.js'
    import login from '@/api/modules/login'	 // 接口请求
    const store = mainStore()
    const router = useRouter()
    const data = reactive({
      isLoading: false,
      type: [
        { name: '1111', value: 0 },
        { name: '2222', value: 1 }
      ]
    })
    
    

    使用unplugin-auto-import后:

    <script setup>
    const store = mainStore()
    const router = useRouter()
    const data = reactive({
      isLoading: false,
      type: [
        { name: '1111', value: 0 },
        { name: '2222', value: 1 }
      ]
    })
    

    注意版本!!直接npm i安装的如下版本,按照官网配置会报错

    	//先前安装的版本
        "unplugin-auto-import": "^0.19.0",
        "unplugin-vue-components": "^0.28.0",
    

    Module build failed: Error [ERR_REQUIRE_ESM]: require() of ES Module
    在这里插入图片描述

    TypeError: AutoImport is not a function
    在这里插入图片描述
    网上查的解决办法都是说得降低版本,需要回退版本
    回退之后的确可以正常跑了,但我不懂为什么版本高就得降,难道没有高版本的写法吗

    npm install unplugin-vue-components@0.25.2 --save-dev
    
    npm install unplugin-auto-import@0.16.1 --save-dev
    

    重新安装后可正常使用

  • unplugin-vue-components:自动导入组件

    const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
    Components({
            resolvers: [
               ElementPlusResolver()
            ]
          })
    
    

转载请注明出处或者链接地址:https://www.qianduange.cn//article/23272.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!