我已经完成了从vue2.x版本到webpack设置的所有操作，但我无法导入geojson文件

gcuhipw9 于 2023-06-30 发布在 Webpack

关注(0)|答案(1)|浏览(152)

我尝试使用openlayers添加一个geojson图层。
但在vue2.x版本中，geojson文件无法导入，因此无法添加图层。
我现在的webpack配置是（vue.config.js）：
”

const { VueLoaderPlugin } = require('vue-loader');
const path = require('path');

module.exports = {
    lineOnSave: false,

    devServer: {
        proxy: 'http://localhost:8080'
    },

configureWebpack: {
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.geojson$/,
                loader: 'json-loader'
            }
        ],
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".jsx", 'json', 'geojson'],
          },
        plugins : [
            new VueLoaderPlugin(),
        ],
    }
}

}

”
vue文件中mainMap.vue的代码是：
”

import koreaPath from '../assets/geojsonFile/korean.geojson'
mounted(){

    this.createKoreaMap()
}

data() {
    return{
        olmap: undefined,
        
    }
},

methods: {
    createKoreaMap() {

        this.olmap = new OlMap({
            target: this.$refs.map,
            layers: [
                new OlLayerTile({
                    source: new OSM({
                        url: 'https://xdworld.vworld.kr/2d/midnight/service/{z}/{x}/{y}.png'
                    })
                })
            ],
            view: new OlView({
                center: fromLonLat([126.978275264, 37.566642192]), // 경기도 성남
                zoom: 10
            })
        })
}

”
最后，当我使用npm run serve构建时，错误是：

@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/components/mainMap.vue?vue&type=script&las!./src/components/mainMap.vue?vue&type=script&lang=js& 14:0-61
@ ./src/components/mainMap.vue?vue&type=script&lang=js& 1:0-201 1:217-220 1:222-420 1:222-420
@ ./src/components/mainMap.vue 2:0-59 3:0-54 3:0-54 10:2-8
@ ./src/components/mainMap.vue?vue&type=script&lang=js& 1:0-201 1:217-220 1:222-420 1:222-420                                         s!./src/App.vue?vue&type=script&lang=js& 1:0-47 9
@ ./src/components/mainMap.vue 2:0-59 3:0-54 3:0-54 10:2-8
@ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/App.vue?vue&type=script&lang=js& 1:0-47 9:4-11
@ ./src/App.vue?vue&type=script&lang=js& 1:0-191 1:207-210 1:212-400 1:212-400
@ ./src/App.vue 2:0-55 3:0-50 3:0-50 10:2-8
@ ./src/main.js 2:0-28 7:17-20

webpack compiled with 1 error

我试过不同的方法，但我已经痛苦了两天。我该怎么办？？

webpack

来源：https://stackoverflow.com/questions/76579340/ive-done-everything-from-the-vue-2-x-version-to-the-webpack-settings-but-i-can

1条答案

按热度按时间

ljo96ir51#

下面是如何在Vue中导入JSON文件的示例：

import jsonFile from '@/assets/geojsonFile/korean.geojson'

下面是一个webpack（v5）配置的例子：

module: {
    rules: [
      { test: /\.vue$/, loader: "vue-loader" },
      // JavaScript: Use Babel to transpile JavaScript files
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: ["@babel/plugin-transform-runtime"],
          },
        },
      },

      // Images: Copy image files to build folder
      { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: "asset/resource" },

      // Fonts and SVGs: Inline files
      { test: /\.(woff(2)?|eot|ttf|otf|svg|)$/, type: "asset/inline" },
    ],
  },

  resolve: {
    modules: ["paths/to/src", "node_modules"],
    extensions: [".js", ".ts", ".json"],
    alias: {
      "@": "paths/to/src",
      assets: "paths/to/static",
    },
  },

我希望这对你有帮助！

赞(0）回复(0）举报 2023-06-30

我来回答

我已经完成了从vue2.x版本到webpack设置的所有操作，但我无法导入geojson文件

1条答案

相关问题

热门标签

最新问答