Vue项目本地环境使用file-saver报TypeError: i.createObjectURL is not a function

报错原因 #

本地开发环境出现TypeError: i.createObjectURL is not a function但生产环境正常，核心差异在于：

• 开发环境全局对象被沙箱隔离：Vue开发服务器（如Vue CLI的dev-server）可能对全局window对象做代理或沙箱处理，导致file-saver库无法正常访问原生的URL.createObjectURL/webkitURL.createObjectURL方法。
• 依赖版本不一致：本地开发依赖的file-saver版本与生产环境存在差异，新版本在开发沙箱中存在兼容性问题。
• 构建缓存干扰：本地构建缓存导致file-saver的代码未正确加载，或加载了错误的代码片段。

解决方法 #

1. 用原生API替代file-saver（临时快速解决）

绕开file-saver库，直接使用浏览器原生下载逻辑，避免依赖库的环境兼容问题：

handleExport: function () {
  const blob = new Blob(['Hello, world!'], { type: 'text/plain;charset=utf-8' })
  const url = window.URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'hello.txt'
  document.body.appendChild(link)
  link.click()
  // 清理资源
  window.URL.revokeObjectURL(url)
  document.body.removeChild(link)
}

同时建议将方法名从export改为handleExport，避免与JS关键字冲突。

2. 统一依赖版本

检查package.json中file-saver的版本，确保本地与生产环境完全一致：

1. 删除node_modules和package-lock.json（或yarn.lock）
2. 重新执行npm install（或yarn install）

3. 清理开发构建缓存

执行以下操作清除缓存后重新构建：

• Vue CLI项目：运行npm run serve --no-cache
• 手动删除项目根目录下的node_modules/.cache文件夹

4. 调整开发环境配置（针对沙箱问题）

若使用Vue CLI，可在vue.config.js中添加配置，确保全局对象的原生方法可访问：

module.exports = {
  devServer: {
    // 禁用沙箱（仅开发环境使用）
    sandbox: false
  }
}

内容的提问来源于stack exchange，提问作者Daniel Gironás