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

Posted 2021-05-06

当我使用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（）来获取two.json文件的内容。我引用的两个.json文件在开发服务器中加载，但在运行生成版本时不加载。下面的代码位于一个名为.vue的PeriodicTable.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')

答案

你似乎对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。