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

Posted 2023-02-22

【中文标题】.json 数据显示在 webpack 服务器中，但不显示在生产版本中

【英文标题】：.json data shows in webpack server, but not production build

【发布时间】：2018-12-22 07:44:57

【问题描述】：

当我使用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')

【问题讨论】：

您的config/index.js 中有什么内容？

@dziraf 现在在问题中进行了编辑。我很抱歉最初没有包含它。

不，不是这个 - 提供来自 config 文件夹的包含构建路径的文件夹

@dziraf 嗯。我没有配置文件夹 - 我唯一拥有的 index.js 文件是我在问题中发布的那个。我以为我的 webpack.common.js / webpack.prod.js 包含必要的构建路径，不是吗？

【参考方案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。

【讨论】：

已经测试过了，但是当 webpack 处理 JSON 文件时出现了其他问题。正在调查...

我现在明白了！我必须这样做是有道理的，因为我想下载文件而不是将其包含在 JS 包中。非常感谢您的帮助！

呸，我开枪了……JSON文件被复制过来了，但不是JSON，而是一些JS内容。

啊，还要确保从第二个file-loader的模式中删除json。

嗯。我想我是自动完成的，因为它对我有用 - 我现在看到了编辑，谢谢！