背景
原本是使用jszip去解压zip包，获取文件内容的，但是jszip是直接解压到内存里，有大小限制，太大的包没法解析，所以改用@zip.js/zip.js
解压代码实现示例
<template><div><input type="file" ref="file" @change="handleZip"></div>
</template><script>
// 导入必要的类和核心模块
import { ZipReader, BlobReader, TextWriter } from '@zip.js/zip.js'export default {name: 'ZipTest',data () {return {msg: 'ZipTest'}},methods: {async handleZip (e) {const file = e.target.files[0]if (!file) {return console.log('请选择文件')}try {console.log('开始解析zip包...')// 直接使用导入的类const zipReader = new ZipReader(new BlobReader(file))const entries = await zipReader.getEntries()console.log('zip包中的文件列表:', entries, '文件大小：', file.size)for (const entry of entries) {if (entry.directory) continueconsole.log('文件名称:', entry.filename)// 使用TextWriter（非流方式）读取内容try {const content = await entry.getData(new TextWriter())console.log('文件内容:', content)} catch (error) {console.log('文件内容读取失败', error)}}await zipReader.close()console.log('解析完成')} catch (error) {console.log('解析失败', error)}}}
}
</script><style scoped></style>
报错
这个是因为webpack4里不支持import.meta.url
解决办法
法一：升级webpack4到webpack5
法二：@zip.js/zip.js使用2.0.12版本，这个版本没有import.meta.url
会报webworker相关的错，因为它默认会使用webworker，需要设置useWebWorkers为false
const zipReader = new ZipReader(new BlobReader(file), {useWebWorkers: false})
法三：自定义webpack的loader，把import.meta.url转为空字符串
因为是用@vue/vli 4.x创建的项目，新增vue.config.js, 如下配置：
const path = require('path')module.exports = {// 自定义loader，把import.meta.url转为空字符串// 这个loader在所有的loader之前执行// 把node_modules/@zip.js/zip.js目录的js文件都应用这个loader// 并且这个是在所有的loader之前执行chainWebpack: config => {config.module.rule('import-meta-url').enforce('pre').test(/\.js$/).include.add(path.resolve(__dirname, 'node_modules/@zip.js/zip.js')).end().use('import-meta-url-loader').loader(path.resolve(__dirname, 'loaders/import-meta-url-loader.js'))}
}
loaders/import-meta-url-loader文件：
module.exports = function (source) {
// 这里的打印是为了测试，可以删除console.log('执行自定义import-meta-url-loader。。。')return source.replace(/import.meta.url/g, '""')
}