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

当我使用

npm-run-dev

加载我的站点进行开发时，没有问题。但是，当我为生产构建使用

npm run prod

构建网站时，my.json中的数据不会显示在网页上，也不会显示在我的输出dist文件夹中

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

在下面的代码中，我使用XMLHttpRequest（）获取两个.json文件的内容。我引用的两个.json文件在开发服务器中加载，但在运行生产构建时不加载。下面的代码位于名为

PeriodicTable.vue

的

.vue

组件中（我认为这里的问题不是vue）

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

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')

---

您似乎对

文件加载程序的功能有一些误解<代码>文件加载器

当然会将文件复制到您的dist目录，但它只会复制由代码加载的文件。目前，webpack不知道该文件存在。如果您执行了

require（'./some.json'）

（或导入），则会触发文件加载程序并替换URL。在执行提取的代码中，替换：

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

…与：

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

…这将进行正确的重写/输出

更新：

你还需要一个额外的步骤。默认情况下，Webpack4在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

文件触发器

文件加载器

您的

config/index.js

中有什么？@dziraf现在在问题中编辑它。我很抱歉最初没有包括它。不，不是这一个-给一个从

config

文件夹，其中包含构建paths@dziraf嗯，我没有配置文件夹-我唯一的index.js文件就是我在问题中发布的那个。我认为我的webpack.common.js/webpack.prod.js包含了必要的构建路径，没有？测试了这一点，但是当webpack处理JSON文件时，出现了一些其他问题。调查…我现在明白了！我必须这样做是有道理的，因为我想下载文件，而不是将其包含在JS包中。非常感谢你的帮助！啊，我跳枪了。。。JSON文件被复制，但它不是JSON，而是一些JS内容。啊，还必须确保从第二个

文件加载程序的模式中删除
JSON
。我想我是自动完成的，因为它对我很有用-我现在看到编辑了，谢谢！
var url = require('../assets/data/main.json');

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'
        }
      }
    ],
    // ...
  }
  // ...
};