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

最新推荐文章于 2024-07-10 10:51:13 发布

随便起的名字也被占用

最新推荐文章于 2024-07-10 10:51:13 发布

阅读量4.8k

点赞数 2

分类专栏： vue3.0学习文章标签： element-plus v-loading报错处理

本文链接：https://blog.csdn.net/csl125/article/details/123508908

版权

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

55 篇文章 31 订阅

订阅专栏

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