You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Vite构建的Vue.js项目中使用Tesseract.js遇process.env未定义问题

解决Vite+Vue项目中Tesseract.js的"Cannot read properties of undefined (reading 'TESS_ENV')"错误

方案一:手动指定Worker路径(推荐)

直接在初始化Tesseract时传入workerPath、corePath等配置,跳过它默认的process.env判断逻辑,从根源避免错误:

import Tesseract from 'tesseract.js';

const worker = Tesseract.createWorker({
  // 开发环境直接引用node_modules中的dev worker文件
  workerPath: import.meta.env.MODE === 'development' 
    ? '/node_modules/tesseract.js/dist/worker.dev.js' 
    : '/assets/tesseract/worker.min.js', // 生产环境提前将worker.min.js复制到项目静态资源目录
  corePath: '/assets/tesseract/tesseract-core.wasm.js', // 把tesseract-core.wasm.js也放到静态资源目录
  // 可选:语言包同样放到本地静态资源目录,避免依赖外部资源
  langPath: '/assets/tesseract/lang',
});

// 后续初始化并使用Worker
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
// 执行OCR识别操作
const { data: { text } } = await worker.recognize('/path/to/image.jpg');

方案二:用Vite的define注入process环境变量

在Vite配置文件(vite.config.js)中添加define配置,全局模拟process.env对象,适配Tesseract的原有逻辑:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  define: {
    'process.env': {
      TESS_ENV: import.meta.env.MODE === 'development' ? 'development' : 'production'
    }
  }
});

注意:这种方式会全局注入process.env,可能和其他依赖的逻辑冲突,需要测试兼容性。

方案三:用patch-package持久化修改依赖文件

如果必须修改Tesseract的源码逻辑,可以用patch-package保存修改,避免每次npm install后丢失:

  1. 安装patch-package开发依赖:
npm install patch-package --save-dev
  1. 找到node_modules/tesseract.js/src/worker/browser/defaultOptions.js,将其中的process.env.TESS_ENV替换为import.meta.env.MODE:
module.exports = {
  ...defaultOptions,
  workerPath: (typeof import.meta !== 'undefined' && import.meta.env.MODE === 'development')
    ? resolveURL(`/dist/worker.dev.js?nocache=${Math.random().toString(36).slice(3)}`)
    : '/assets/tesseract/worker.min.js', // 替换为本地静态资源路径
  corePath: '/assets/tesseract/tesseract-core.wasm.js', // 替换为本地静态资源路径
};
  1. 生成补丁文件:
npx patch-package tesseract.js
  1. 在package.json的scripts中添加postinstall脚本,确保每次安装依赖后自动应用补丁:
{
  "scripts": {
    "postinstall": "patch-package"
  }
}

内容的提问来源于stack exchange,提问作者Ilijanovic

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.25 23:31:36