@tensorflow/tfjs-tflite本地网页NPM加载失败求助

你遇到的404错误是因为@tensorflow/tfjs-tflite依赖的WASM（WebAssembly）文件没有被正确打包到项目输出目录，导致浏览器运行时无法找到这些资源。以下是针对不同打包工具的解决方案：

1. Webpack 配置方案 #

步骤1：安装资源复制插件 #

npm install copy-webpack-plugin --save-dev

步骤2：修改webpack.config.js #

添加插件配置，将node_modules中的WASM文件复制到输出目录：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 保留原有其他配置
  plugins: [
    // 新增复制WASM资源的配置
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'node_modules/@tensorflow/tfjs-tflite/dist/*.wasm',
          to: '[name][ext]' // 保持原文件名输出
        }
      ]
    })
  ]
};

2. Vite 配置方案 #

修改vite.config.js，确保WASM资源被正确识别和打包：

import { defineConfig } from 'vite';

export default defineConfig({
  optimizeDeps: {
    include: ['@tensorflow/tfjs-tflite']
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'tfjs-tflite': ['@tensorflow/tfjs-tflite']
        }
      }
    },
    assetsInclude: ['**/*.wasm'] // 识别WASM为静态资源
  },
  server: {
    assetsInclude: ['**/*.wasm'] // 开发服务器也识别WASM资源
  }
});

3. 手动指定WASM路径（通用方案） #

如果不想修改打包工具配置，可以在导入tflite模块前手动设置WASM资源的路径：

import "@tensorflow/tfjs-backend-cpu";
import * as tf from "@tensorflow/tfjs-core";

// 设置WASM文件的访问路径，需对应打包后文件的实际位置
tf.setWasmPath('./');

import * as tflite from "@tensorflow/tfjs-tflite";

问题根源 #

CDN方式加载时，tf-tflite.min.js会默认从CDN的dist目录加载WASM文件；而NPM安装后，这些WASM文件位于node_modules目录下，多数打包工具不会自动复制这类非JS/CSS资源到输出目录，导致浏览器请求时返回404。

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