Home Articles

Vue单个文件组件中的相对路径无法正常工作[重复]

Asked
Viewed 494 times
2

这个问题在这里已有答案:

所以最近我对Vue.js和OpenLayers 5进行了一次小挑战 .

我想要做的第一步是创建一个简单的Open街道 Map ,并将我自己的GPS数据作为矢量图层放在其上 .

事情进展顺利,直到我在Vue.js单个文件组件中遇到问题 "path" .

Below is what the child component looks like (for the GPS vector layer generation):

<template>
  <div>
      <input type="button" value="addGPXData" @click="addData"/>
  </div>
</template>

<script>
import Map from 'ol/Map.js';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style.js';
import VectorSource from 'ol/source/Vector.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import GPX from 'ol/format/GPX.js';

export default {
  name: 'addGPXData',
  props: ['map'],
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {
    addData: function() {
        console.log('addData_map: ', this.map);

        var style = {
            'Point': new Style({
                image: new CircleStyle({
                    fill: new Fill({
                        color: 'rgba(255,255,0,0.4)'
                    }),
                    radius: 5,
                    stroke: new Stroke({
                        color: '#ff0',
                        width: 1
                    })
                })
            }),
        };

        var vector = new VectorLayer({
            source: new VectorSource({
                //url: '.././assets/2018-08-05_17-22-37.gpx',
                //url: '.././assets/test.gpx',
                url: 'https://openlayers.org/en/v4.6.2/examples/data/gpx/fells_loop.gpx',
                crossOrigin: 'anonymous',
                format: new GPX()
            }),
            style: style['Point']
        });

        this.map.addLayer(vector);
    }
  }
}
</script>

Please notice the three lines of URL in VectorSource

The line I left there is the only URL (with https://) that works ,它是来自OpenLayers本身的URL,用于示例和演示 .

我从官方下载了.gpx文件,并将其与我自己的GPS文件 2018-08-05_17-22-37.gpx 一起重命名为 test.gpx . 我把它们放到默认资产文件夹中 . 我的文件系统的结构看起来像这样(我没有改变它,它最初是由Vue-cli创建的):

--src
  --assets
    --2018-08-05_17-22-37.gpx
    --test.gpx
  --components
    --addGPXData.vue
    --mapContainer.vue
  --App.vue
  --main.js

I would like to know what is wrong with these two lines of URL which I commented out? I have read the official document and I understand for those situations, a relative path, which begins with "." need to be used. I did that, but it still doesn't work. How should I write the path for local files?

静态资产和路径的官方文档:

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling

update:

我已经尝试了给出的建议,感谢所有帮助过的人,但目前没有任何作用 . ../@import

我开始阅读OpenLayers的文档,我发现它非常有趣:

OpenLayers将 URL 并创建一个XMLHttpRequest来加载GPX文件 . 我认为这就是问题所在 . 因为我认为我们可以't make XMLHttpRequest in Vue to get a local file. Because all the files will be compiled first and at the end, we don'有一条像'../asset/x.gpx'这样的路径 .

我不知道我是否明白这一点 . 我还会问一下编译后文件系统会是什么样子?

The final update

今天我通过将GPX文件放到公共文件夹并使用Vue-resource(GET)来获取它来解决了这个问题,代码如下所示:

// get the GPX file
    this.$http.get(self.selectedGPX + '.gpx').then(response => {
        var GPXString = response.body;
    }, response => {
        //error callback
        console.log('Http request get error');
    });

在OpenLayers方面,我刚刚使用了标记为重复的问题的 solution 2 . 我不再使用 URL 选项并选择将 Vue-resource 作为 String 加载GPX文件并解析它,最后将解析后的功能添加到空矢量图层 .

2 Answers

  • 1

    您的组件嵌套在一个文件夹深处( /components/addGPXData.vue ),因此您只需 ../ 即可返回 /assets 目录 . 从我的理解你的网址必须是 ../assets/2018-08-05_17-22-37.gpx

  • 0

    我想你可以解决这个导入文件:

    import gpx from '../assets/2018-08-05_17-22-37.gpx',
    
        var vector = new VectorLayer({
            source: new VectorSource({
                url: gpx,
                crossOrigin: 'anonymous',
                format: new GPX()
            }),
            style: style['Point']
        });
    

    确保 webpack 正在gpx文件上使用 file-loader .

    vue.config.js

    module.exports = {
      configureWebpack: {
        module: {
            rules: [{
                test: /\.gpx$/i,
                use: [{
                    loader: 'file-loader'
                }]
            }]
        }
      }
    }
    

Related