element plus 使用v-loading报错解决Can‘t resolve ‘element-plus/es/components/loading-directive/style/index‘-Toy模板网

这篇具有很好参考价值的文章主要介绍了element plus 使用v-loading报错解决Can‘t resolve ‘element-plus/es/components/loading-directive/style/index‘。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

报错如下：

Failed to compile.

./src/views/detectionSystems/deviceStatusList/index.vue?vue&type=template&id=2de634af&scoped=true (./node_modules/unplugin/dist/webpack/loaders/transform.js??ref--34-0!./node_modules/unplugin/dist/webpack/loaders/transform.js??ref--35-0!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/detectionSystems/deviceStatusList/index.vue?vue&type=template&id=2de634af&scoped=true) Module not found: Error: Can't resolve 'element-plus/es/components/loading-directive/style/index' in 'C:\code\SIDS\sids_jg_xuanwumen\src\views\detectionSystems\deviceStatusList'

解决办法：

1、手动引入

必须把css也引进来，然后使用组件方式。博主用了按需引入的，其他组件都可以，部分反馈组件不能用

    import { ElLoading } from "element-plus";
    import "element-plus/es/components/loading/style/index";

    let loading = null; // loading

    const queryData = (type = "camera") => {
      requestDatas = [];
      loading = ElLoading.service({
        lock: true,
        text: "拼命加载中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 请求接口数据
      cameraChecProgress({ type })
        .then((res) => {
          loading.close();
          requestDatas = res.data; // 后端返回的数据
          state.paingAttr.total = requestDatas.length; // 总条数
          state.paingAttr.page = 1; // 第几页
          toPaging(); // 分页
        })
        .catch(() => {
          requestDatas = [];
          state.listDatas = [];
          state.paingAttr.total = 0;
          state.paingAttr.page = 1; // 第几页
          loading.close();
        });
    };

2、更新按需引入工具（推荐）

使用命令行更新按需引入包，安装完成后，需要重新启动项目

 npm install unplugin-auto-import@latest unplugin-vue-components@latest --save-dev

楼主之前用了

can't resolve 'element-plus/es/locale,vue3,elementplus,框架搭建,vue3,element plus,element按需引入

更新后调整为

can't resolve 'element-plus/es/locale,vue3,elementplus,框架搭建,vue3,element plus,element按需引入

v-loading等反馈组件就可以按需引入了文章来源地址https://www.toymoban.com/news/detail-597879.html

到了这里，关于element plus 使用v-loading报错解决Can‘t resolve ‘element-plus/es/components/loading-directive/style/index‘的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！