无法在 Vue 项目中打开本地 .geojson 文件答案

【问题标题】：Can't open local .geojson files inside Vue Project无法在 Vue 项目中打开本地 .geojson 文件
【发布时间】：2021-03-11 21:45:26
【问题描述】：

我正在尝试在我的 VueJS 项目中加载静态 .geojson 文件。简单的 .json 文件正在工作，但 .geojson 文件给了我以下错误：

Uncaught Error: Module parse failed: Unexpected token (1:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> {"type": "FeatureCollection", "features": []}
    at eval (address.geojson:1)
    at Object../src/venue/amenity.geojson (app.js:1418)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Prodmap.vue?vue&type=script&lang=js&:13)

等等.. 当然，我可以将所有文件切换为 .json，但这只能是临时解决方法。

import Address from '@/venue/address.json'; // works
import Address from '@/venue/address.geojson'; // gives me the error

【问题讨论】：

标签： javascript vue.js webpack geojson vue-cli

【解决方案1】：

Vue CLI 原生加载 JSON，但我不确定如何为不同的扩展配置它。这是另一种选择：

安装json-loader：

npm install json-loader

在您的项目根目录中的 vue.config.js 中配置 json-loader（必要时创建文件）：

module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.geojson$/,
          loader: 'json-loader'
        }
      ]
    }
  }
}

【讨论】：