时间戳

首页 > 解决方案 > .json 数据显示在 webpack 服务器中，但不显示在生产版本中

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

问题描述

当我加载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 文件在开发服务器中加载，但在我运行生产构建时不加载。下面的代码在一个.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();
     }
     ...

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

文件目录

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

标签： javascripthtmljsonwebpackvue.js

解决方案

您似乎对做什么有一些误解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文件 triggers file-loader。

推荐阅读