打包版本出现ENOENT错误：找不到names.json文件，Node运行正常

问题原因 #

开发时Node直接运行，工作目录是项目根目录，path.join('data', 'names.json')能正确指向项目根下的data/names.json；但打包后，代码的执行路径、静态资源的位置会被打包工具（如Webpack、Electron打包器）改变，原相对路径不再有效。

解决方案 #

1. Electron 打包场景 #

Electron打包后应用的实际运行路径与开发时不同，需结合__dirname或Electron的app模块定位文件：

const path = require('path');
const fs = require('fs');

// 方案1：使用__dirname（Webpack需额外配置node: { __dirname: false }）
const filePath = path.join(__dirname, 'data', 'names.json');
const data = fs.readFileSync(filePath, 'utf8');

// 方案2：通过Electron的app模块获取应用根路径
const { app } = require('electron');
const filePath = path.join(app.getAppPath(), 'data', 'names.json');
const data = fs.readFileSync(filePath, 'utf8');

2. Webpack 打包场景 #

方式一：将JSON作为资源导入

修改Webpack配置，把JSON文件作为静态资源处理并保留目录结构：

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.json$/,
        type: 'asset/resource',
        generator: {
          filename: 'data/[name][ext]' // 打包后输出到dist/data目录
        }
      }
    ]
  }
};

之后在代码中直接导入JSON文件即可使用，无需手动读取：

const namesData = require('./data/names.json');

方式二：复制静态资源目录

使用copy-webpack-plugin将data目录完整复制到打包输出目录：

1. 安装插件：

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

2. 修改Webpack配置：

// webpack.config.js
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'data', to: 'data' } // 把项目根下的data目录复制到dist/data
      ]
    })
  ]
};

配置完成后，代码中仍可使用path.join('data', 'names.json')，但需确保运行程序时的工作目录为打包输出目录。

3. 通用脚本打包场景 #

如果是简单的脚本打包（如直接用Node打包），可在打包命令中添加静态资源复制步骤：

• Linux/Mac：

"build": "node your-build-script.js && cp -r data dist/"

• Windows：

"build": "node your-build-script.js && xcopy data dist\\data /E /I"

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