使用 Webpack 文件加载器导入静态 json 文件给出文件路径而不是 json 内容

Question

我正在尝试使用 Webpack 文件加载器将静态 json 资源文件复制到 dist/，以便我可以将该 json 文件导入 Vue.js 组件中。当我运行npm run build 时，Webpack 正在正确复制文件，但是当我尝试导入文件（如import myJson from '@/static/runtimeConfig.json'）时，“myJSON”变量只获取文件路径而不是实际的 JSON 文件内容。谁能帮我理解这是为什么？

我的 webpack 文件加载器配置如下所示：

module: {
      //load runtimeConfig.json file through a custom loader
      rules: [
        {
          // set the type to javascript/auto to bypass webpack's built-in json importing
          type: 'javascript/auto',
          test: /(runtimeConfig\.json)$/i,
          // file-loader resolves imports on a file and emits that file to dist/
          loader: 'file-loader',
          // use filename runtimeConfig.json instead of a hashed filename
          options: {
            name: '[path][name].[ext]',
            outputPath: 'static',
          }
        }
      ],
    },

我的意图是在 vue.js 组件中导入一个 json 文件，如下所示：

import myJson from '@/static/runtimeConfig.json'

但是，在我进行导入之后，myJson 只是文件的路径，而不是实际的 json 内容

console.log(myJson)
--> /static/src/static/runtimeConfig.json

Answer 1

这正是file-loader 所做的——它将文件复制到dist 并返回文件的路径。因为它主要用于处理imghref属性的内容。现在您可以使用提供的路径通过 ajax 请求在运行时将其加载到正在运行的应用程序中...

如果您只想将 JSON 文件作为对象包含到您的应用程序中，您可以直接导入它而无需任何 Webpack 配置，它将作为 JS 对象导入并包含在您的 JS 包中。这发生在构建时