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

Posted 2023-02-22

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

【英文标题】：Using Webpack file-loader to import static json file gives file path instead of json contents

【发布时间】：2020-04-25 07:03:36

【问题描述】：

我正在尝试使用 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

【参考方案1】：

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

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

【讨论】：

感谢您的回复。我希望进行导入而不是 HTTP GET，但我认为我必须进行 HTTP GET。导入方法似乎只在构建时起作用。由于我将在运行时更改 JSON 文件，因此我不希望它在构建期间被编译。

是的，导入是构建时间的事情。因此，您必须为每个不同的runtimeConfig.json 进行多次构建。但是在运行时通过 Ajax 调用加载文件会减慢您的应用程序速度（等待请求）。这是你的选择......