.json 数据显示在 webpack 服务器中，但不显示在生产版本中

Question

当我使用npm run dev 加载我的网站进行开发时，没有问题。但是，当我使用 npm run prod 构建我的网站进行生产构建时，来自我的 .json 的数据不会出现在网页上，也不会显示在我输出的 dist 文件夹中。

我正在使用 Webpack 4。我认为下面的代码正在更改我对 .json 文件的引用的路径，并将 .json 文件输出到我的 dist/assets 文件夹，类似于 .png、.woff 等。文件。不幸的是，事实并非如此。 （不知道为什么）。

  module.exports = {
  entry: "./src/index.js",
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js',
  },
    module: {
      rules: [
        ...
        {
           test: /\.(png|jpg|gif|eot|ttf|woff|woff2|json)$/,
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: './assets'
           }
        },
        ...
      ]
   },
   ...

在下面的代码中，我使用 XMLHttpRequest() 来获取两个.json 文件的内容。我引用的两个 .json 文件在开发服务器中加载，但在我运行生产构建时不加载。下面的代码在一个名为PeriodicTable.vue 的.vue 组件中（我不认为Vue 是这里的问题）。

mounted: function() {
       ...
       var xmlhttp = new XMLHttpRequest();
       var self = this;
       var url = "/src/assets/data/main.json";
       xmlhttp.open("GET", url, true);
       xmlhttp.onreadystatechange = function() {
         if(this.readyState == 4 && this.status == 200) {
           self.elements = JSON.parse(xmlhttp.responseText).elements;
         }
       }
       xmlhttp.send();

       var xmlhttp2 = new XMLHttpRequest();
       var self = this;
       var url2 = "/src/assets/data/groupPeriodLabels.json";
       xmlhttp2.open("GET", url2, true);
       xmlhttp2.onreadystatechange = function() {
         if(this.readyState == 4 && this.status == 200) {
           self.periodLabels = JSON.parse(xmlhttp2.responseText).periodLabels;
           self.groupLabels = JSON.parse(xmlhttp2.responseText).groupLabels;
         }
       }
       xmlhttp2.send();
     }
     ...

您可以在下面的照片中查看我的文件目录，或者在托管此代码的repository 上查看所有代码。

XMLHttpRequest() 文件似乎没有找到生产版本中 .json 文件的正确路径。是否与import、require 或url() 有关？任何帮助将不胜感激。

编辑：我有一个 index.js，其中包括以下内容：

// index.js
import './css/main.scss';
import 'material-icons/iconfont/material-icons.css';


// VueJS
import Vue from 'vue';
window.Vue = Vue;

// VueSax (UI elements for Vue)
import Vuesax from 'vuesax'
import 'vuesax/dist/vuesax.css' // Gather VueSax styles
Vue.use(Vuesax, {
  theme: {
    colors: {
    }
  }
})

// Feather Icons (Icon library for Vue)
import VueFeatherIcon from 'vue-feather-icon';
Vue.use(VueFeatherIcon);

import Navigation from './components/Navigation.vue';
import PeriodicTable from './components/PeriodicTable.vue';
import Footer from './components/Footer.vue';

new Vue({
  render: k => k(Navigation)
}).$mount('#navigation-el')

new Vue({
   render: h => h(PeriodicTable)
 }).$mount('#grid-el')

new Vue({
  render: m => m(Footer)
}).$mount('#footer-el')

Answer 1

您似乎对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 在您的 JS 包中包含 JSON 文件内容，这是您不想要的，因为您想要 下载 它。为了解决这个问题，我向您的 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。