.json данные отображаются на сервере webpack, но не производственная сборка

У вас, кажется, есть некоторые заблуждения относительно того, что делает file-loader. file-loader, конечно, копирует файлы в ваш каталог dist, но он копирует файлы только через , если они загружаются кодом . В настоящее время webpack не знает, что файл существует. Если вы выполнили require('./some.json') (или импорт), это вызовет загрузчик файлов и заменит URL. В коде, который выполняет выборку, замените:

var url = "/src/assets/data/main.json";

... на:

var url = require('../assets/data/main.json');

... и это сделает правильную перезапись / вывод.

Обновление:

Вам также нужен дополнительный шаг. Webpack 4 по умолчанию включает содержимое файла JSON в вашем пакете JS, которое вам не нужно, так как вы хотите загрузить . Чтобы обойти это, я добавил правило к вашему webpack.common.js:

module.exports = {
  // ...
  module: {
    rules: [
      // ...Right before your file-loader rule
      // Bypass automatic `.json` file processing for webpack
      {
        type: 'javascript/auto',
        test: /\.json$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: './assets'
        }
      },
      // Second file loader. note the removal of the `json` pattern
      {
        test: /\.(png|jpg|gif|eot|ttf|woff|woff2)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]',
          outputPath: './assets'
        }
      }
    ],
    // ...
  }
  // ...
};

... и теперь требуется триггеры .json файлов file-loader.