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

问题 & 解决方案

升级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打包就能成功了,如果有类似的问题,也可以通过这种方法解决。

根因

排查中...

posted @ 2024-06-12 11:36  azoux  阅读(7)  评论(0编辑  收藏  举报