Question

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

我正在使用Webpack4。我认为下面的代码正在更改对.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的{{1}}组件内部（我认为Vue在这里不是问题）。

PeriodicTable.vue

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

XMLHttpRequest（）文件似乎在生产版本中找不到指向.json文件的正确路径。它与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(); } ...，import或require有关系吗？任何帮助将不胜感激。

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

url()

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。

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

1 个答案: