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"

查找解决方法 先去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' }) ) }

结果

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