element-plus 自动导入 使用 v-loading 无法找到样式 element-plus/es/components/loading-directive/style/css 问题解决

查找解决方法及当前使用版本

当前版本

"element-plus": "^2.0.2",


"unplugin-auto-import": "^0.6.1",
"unplugin-vue-components": "^0.17.20"

查找解决方法

1. 先去GitHub 查 element-plus/issues/4855
   发现里面的解决方式还不是很好，结合vs-code 查看 ElementPlusResolver 函数的源码声明 发现有exclude 属性
   
   

解决方法

使用正则表达式 排除loading-directive的样式 exclude: new RegExp(/^(?!.*loading-directive).*$/)

chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src'))
      .set('components', '@/components')
    // config
    //   .plugin('AutoImport')
    //   .use(AutoImport({ resolvers: [ElementPlusResolver()] }))
    // config
    //   .plugin('Components')
    //   .use(Components({ resolvers: [ElementPlusResolver()] }))
    config.plugin('AutoImport').use(
      AutoImport({
        imports: ['vue'],
        resolvers: [
          ElementPlusResolver({
            importStyle: 'css',
            exclude: new RegExp(/^(?!.*loading-directive).*$/)
          })
        ],
        dts: 'auto-imports.d.ts'
      })
    )
    config.plugin('Components').use(
      Components({
        resolvers: [ElementPlusResolver({ importStyle: 'css' })],
        dts: 'components.d.ts'
      })
    )
  }

结果

<div class="w-full h-full flex flex-col" v-loading="pageLoading"></div>

 const nameIdWatchEffect = watch(
      () => props?.name_id,
      () => {
        console.log('进入了')
        if (props?.name_id) {
          pageLoading.value = !pageLoading.value
          setTimeout(() => {
            pageLoading.value = false
          }, 300)
        }
      }
    )