首页 > 其他分享 >升级babel7后,直接引用element-ui中没有暴露出来的组件image-viewer.vue导致的打包错误

升级babel7后,直接引用element-ui中没有暴露出来的组件image-viewer.vue导致的打包错误

时间:2024-06-12 11:44:21浏览次数:17  
标签:vue viewer image element ui 组件

问题 & 解决方案

升级babel7后,原先代码中像这样直接引用element-ui组件的地方,出现了报错

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.

经过一番排查,我发现问题出在 element-ui 并未直接暴露该组件,导致直接引用时,该组件未经过 vue-loader 处理。为了解决这个问题,而不必寻求其他第三方库替代,我采取了以下措施:

在 Webpack 的配置文件中,我添加了一条规则,专门用于处理 image-viewer.vue 组件

// 如果没有引入path,需要先引入:const path = require('path')

{
	test: /(image-viewer.vue)$/,
	loader: 'vue-loader',
	include: [path.resolve("node_modules/element-ui")]
}

这样webpack打包就能成功了,如果有类似的问题,也可以通过这种方法解决。

根因

排查中...

标签:vue,viewer,image,element,ui,组件
From: https://www.cnblogs.com/azoux/p/18243653

相关文章

  • vue tree展开自动获取焦点
     打开弹窗设置默认焦点html代码重点:设置 node-key="id"  ref="table_dedh"<el-tree:data="dedhtreeData"node-key="id"ref="table_dedh":props="{children:'children',label:'label'}"@no......
  • ThingsBoard前端Vue版本开源啦!!!!
    ThingsVue......
  • 搭建vue项目准备-配置git信息
    搭建vue项目准备1、node-v2、npm-v3、git-versionnpm淘宝镜像1、npmconfigsetregistryhttps://registry.npm.tobacco.org/设置淘宝镜像2、npmconfiggetregistry查看镜像地址vscode插件vetureslint安装clinpminstall-g@vue/clivue--versi......
  • Vue 中数组常用方法的使用和示例
    Find查找数组元素Find用来遍历查找数组元素,当找到符合条件的元素时,直接返回。所以Find元素只会返回符合条件的第一个元素//数据types:[{"value":0,"label":"头像素材"},{"value":1,......
  • vue PDF预览——vue-pdf用法
    第一步 引入vue-pdfnpminstall--savevue-pdf第二步 页面中使用<template><div><button@click="open">打开PDF</button><el-dialogtitle="PDf预览":visible.sync="dialogVisible"width="50%":......
  • Vue3——setup语法糖
    setup概述setup是Vue3中新的配置项,值是一个函数,组件中所用到的数据、方法、计算属性、监视等等,均配置在setup中。setup函数返回的对象中的内容,可直接在模版中使用。setup中不能使用this关键字,this是undefined。setup会在beforeCreate()函数之前调用,领先所有的钩子函数执行的......
  • Vue事件修饰符
    1.vue的事件修饰符有哪些.stop.prevent.self.capture.once.passive 2.使用方法.stop,相当于原生写法中的event.stopPropagation(),用于阻止事件冒泡<template><div@click="father"><[email protected]="son"></button></div>&l......
  • 基于jeecgboot-vue3的Flowable流程--抄送我的功能
    因为这个项目license问题无法开源,更多技术支持与服务请加入我的知识星球。1、抄送我的界面代码如下:<template><divclass="p-2"><!--查询区域--><divclass="jeecg-basic-table-form-container"><a-formref="formRef"@keyup.enter.nati......
  • Summary:《Adversarial Machine Learning in Image Classification: A Survey Towards
    Note“TaxonomyofAdversarialImages”(Machado等,2023,p.5)(pdf)扰动范围(PerturbationScope):个体扰动(Individual-scopedperturbations):为每个输入图像单独生成的扰动。通用扰动(Universal-scopedperturbations):独立于任何输入样本生成的扰动,可应用于任何合......
  • 【第1章】Vue环境搭建
    文章目录前言一、安装Node1.下载2.安装3.验证3.1npm版本与Node.js版本3.2验证环境4.npm4.1安装npm4.2安装包4.3全局安装包4.4更新包4.5删除包4.6查看已安装的包4.7初始化package.json5.国内源二、安装VisualStudioCode1.下载2.安装3.安装Vue-Offici......