如何在Nuxt/VueJS Web应用中提供静态二进制文件服务？

问题根源 #

你使用的/server/static/路径并非Nuxt静态文件的正确访问路径，Nuxt会将该路径识别为前端路由，最终返回Vue应用的入口HTML（即app.vue渲染的内容），这就是你拿到组件HTML而非目标文件的原因。

解决方案步骤 #

1. 正确放置静态文件 #

• Nuxt 3：将.txt、.zip等静态文件放在项目根目录的public文件夹中，该文件夹内的文件会直接部署到应用根路径下。
• Nuxt 2：对应文件夹为static，逻辑一致。

2. 修正Fetch路径 #

无需添加额外前缀，直接使用文件名或根路径+文件名请求。例如hello_world.txt放在public中，请求路径为/hello_world.txt。

修正后的测试代码：

const fileName = 'hello_world.txt'
// 直接访问public文件夹中的文件
const filePath = `/${fileName}`

const response = await fetch(filePath);
console.log(`Response status: ${response.status}`)
console.log(`Response headers:`, response.headers)

if (response.ok) {
    const data = await response.text()
    console.log(data)
} else {
    console.error('Failed to fetch the file:', response.statusText)
}

3. 用JSZip处理ZIP文件（核心需求实现） #

加载并解压ZIP文件时，需请求二进制数据再传入JSZip处理，示例代码如下：

import JSZip from 'jszip'

const zipFileName = 'music_files.zip'
const zipPath = `/${zipFileName}`

const response = await fetch(zipPath);
if (response.ok) {
    // 获取二进制数据
    const blob = await response.blob()
    const zip = await JSZip.loadAsync(blob)
    
    // 遍历ZIP内文件，处理MIDI/MusicXML
    zip.forEach(async (relativePath, zipEntry) => {
        if (!zipEntry.dir) { // 跳过文件夹
            if (relativePath.endsWith('.mid') || relativePath.endsWith('.midi')) {
                const arrayBuffer = await zipEntry.async('arraybuffer')
                // 处理MIDI数据
                console.log('MIDI文件内容:', arrayBuffer)
            } else if (relativePath.endsWith('.xml') || relativePath.endsWith('.musicxml')) {
                const text = await zipEntry.async('text')
                // 处理MusicXML数据
                console.log('MusicXML文件内容:', text)
            }
        }
    })
} else {
    console.error('Failed to fetch ZIP file:', response.statusText)
}

注意事项 #

• 先安装JSZip：执行npm install jszip或yarn add jszip。
• 若静态文件放在子文件夹（如public/music/），请求路径需改为/music/xxx.zip。
• 开发环境下Nuxt会自动处理public文件夹的文件热更新，无需额外配置。

内容的提问来源于stack exchange，提问作者apps2go