升級babel7後,直接引用element-ui中沒有暴露出來的元件image-viewer.vue導致的打包錯誤

azoux發表於2024-06-12

問題 & 解決方案

升級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打包就能成功了,如果有類似的問題,也可以透過這種方法解決。

根因

排查中...

相關文章