[JavaScript知识库]vue3.x 项目使用element-plus 自动按需导入 使用v-loading报错 无法找到样式 element-plus/es/components/loading-directive/sty

element-plus版本：

  "element-plus": "^2.0.5",

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

解决方法

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

  configureWebpack: config => { // webpack 配置
    const plugins = [
      AutoImport({
        resolvers: [ElementPlusResolver({
          exclude: new RegExp(/^(?!.*loading-directive).*$/) //修改此处
        })],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]

    if (process.env.NODE_ENV === 'production') {
      plugins.push(
        //统一配置打包插件
        new CompressionWebpackPlugin({
          algorithm: 'gzip',
          test: /\.js$|\.json$|\.css/,//匹配文件名
          threshold: 10240,//对10K以上的数据进行压缩
          minRatio: 0.8,
          deleteOriginalAssets: false,//是否删除源文件
        })
      )
    }
    config.plugins = [...config.plugins, ...plugins]
    return {
      output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
        filename: `[name].${app_version}.${Timestamp}.js`,
        chunkFilename: `[name].${app_version}.${Timestamp}.js`
      },
    }
  },

然后 在组件中使用 v-loading就可以正常使用了