Javascript Vue单文件组件中的相对路径无法正常工作

因此，最近我正在用Vue.js和OpenLayers 5做一个小挑战

我想做的第一步是创建一个简单的开放式街道地图，并将我自己的GPS数据作为矢量层放在上面

事情进展顺利，直到我对Vue.js单文件组件中的路径出现问题

下面是子组件的外观（用于生成GPS矢量层）：

<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>

我想知道我注释掉的这两行URL有什么问题？我已经阅读了官方文件，我理解在这些情况下，需要使用以“.”开头的相对路径。我这么做了，但还是不行。如何写入本地文件的路径？

静态资产和路径的正式文件：

更新：

<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>

我已经试过给出的建议了，谢谢你们的帮助，但现在什么都不管用。

。/

，

@

或

导入

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

OpenLayers将调用

URL

，并进行XMLHttpRequest以加载GPX文件。我认为这就是问题所在。因为我认为我们不能在Vue中使用XMLHttpRequest来获取本地文件。因为所有文件都将首先编译并在最后编译，所以我们没有像“../asset/x.gpx”这样的路径

我不知道我是否理解正确。我还想问，在编译完之后，文件系统会是什么样子

最终更新

今天，我通过将GPX文件放入公用文件夹并使用Vue资源（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方面，我刚刚使用了问题中标记为重复的解决方案2。我不再使用

URL

选项，而是选择将带有

Vue资源的GPX文件加载为
String
并对其进行解析，最后将解析后的功能添加到空向量层。
您的组件嵌套在一个文件夹深处（
/components/addGPXData.Vue
），因此，您只需
。/
即可返回
/assets
目录。据我所知，您的url必须是
。/assets/2018-08-05_17-22-37.gpx
我认为您可以通过导入文件来解决此问题：

    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'
            }]
        }]
    }
  }
}

“./assets/test.gpx”或“@/assets/test.gpx”应该都能用。@DanielBeck谢谢你的建议，我两个都试过了。但我得到了一个奇怪的错误，说是xml解析器错误。。。预期：这听起来像是在正确查找.gpx文件，并报告其中的错误。（我对.gpx格式一无所知，但它是XML格式，您会遇到一个XML解析器错误，因此这非常强烈地表明问题就在这里。）您可能需要为此单独提出一个问题，因为它与您在这里提出的相对路径问题无关。我已经研究了很多，我非常确定这是一个路径问题。请参阅问题描述中的“我的更新”部分。由于OP努力改进问题，我投票重新打开。我已尝试导入gpx文件，但不幸收到错误消息：
模块解析失败：意外标记（1:0）您可能需要适当的加载程序来处理此文件类型。
@MinXIE，这意味着
url加载器
未用于解析文件。是将
导入
解析为正确url的
url加载程序。你能把你的
vue.config.js
放到问题中吗？我快速搜索了vue.config.js，文档上说它应该在我的
package.json
旁边。但实际上我没有那个档案。我不知道怎么了。我真的是个初学者。我应该创建一个吗？
vue.config.js
是在vue cli 3上引入的。如果没有
vue.config.js
文件，则项目可能不是使用它创建的，并且存在
webpack.conf.js
或
webpack.base.conf.js
文件。项目是如何初始化的？有这样的文件吗？该项目是今天使用vue cli 3创建的。创建时使用了defaut设置。我在src文件夹下找到了
gitignore
，
babel.config.js
，
package lock.json
和
package.json
。感谢您的建议，我已经尝试了
。/
路径，这次我在控制台中收到了错误消息：xml解析器错误。。。预期