解决vue3 vue-cli element-plus导入样式失败的问题

最新推荐文章于 2025-11-07 15:17:20 发布

原创最新推荐文章于 2025-11-07 15:17:20 发布 · 7.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文指导如何在Vue3项目中使用Element Plus，遇到样式导入失败时，通过调整Webpack配置并添加ElementPlusResolver参数，修复了loading指令样式问题。附带解决方案链接和可能的其他查找路径。

解决vue3 vue-cli element-plus导入样式失败的问题

本来想给按钮添加一个加载的指令，也就是v-loading的时候，浏览器和编译器都报了一个 Can’t resolve 'element-plus/es/components/loading-directive/style/css’这个问题，也就是找不到样式包

这是在vue.config.js/webpack.config.js中的配置

configureWebpack:{
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
  }

然后我在github上找到了可使用的解决方法
就是在resolvers: [ElementPlusResolver()],中添加参数

也就是做成这个样子

configureWebpack:{
    plugins: [
      AutoImport({
        resolvers: [ElementPlusResolver({ importStyle: false })],
      }),
      Components({
        resolvers: [ElementPlusResolver({ importStyle: false })],
      }),
    ],
  }