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

最新推荐文章于 2025-06-01 22:00:33 发布

原创最新推荐文章于 2025-06-01 22:00:33 发布 · 4.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#element-plus #v-loading报错处理

vue3.0学习专栏收录该内容

55 篇文章

订阅专栏

本文介绍了如何在Element-Plus版本2.0.5中通过正则表达式排除loading-directive样式，详细讲解了webpack配置并展示了在组件中正常使用v-loading的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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就可以正常使用了