javascript - 如何在Vue中导入本地存储的xml文件并进行编辑？

Question

我是 VueJS 的新手，现在想用 Vue JS 重写我的纯 Javascript SPA 的一部分(仅用于培训和学习)。 我使用 Vue-CLI 创建了我的项目。现在，这是我的文件结构的一部分:

---src
   |---assets
       |---logo.png
   |---components
       |---loadXML.vue
       |---table01.vue
       |---table02.vue
   |---static
       |---ABC.xml
   |---app.vue

我最近在为这个问题苦苦挣扎:

我想加载并读取一个本地存储的 xml 文件(在静态文件夹中)到 Vue 实例中，然后解析它并对其进行一些编辑。

在我的纯 Javascript 中，使用以下方法非常简单:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        var xmlDoc = this.responseXML;
    }
}
xhttp.open('GET', 'ABC.xml', true);

而且我可以对 xmlDoc

做所有我需要的事情

但在 Vue JS 中，我发现加载和读取(解析)xml 文件非常困难，即使我搜索了很多，我也找不到合适的方法来完成它。我已经尝试过以下方法:

(1)通过import直接将本地xml文件导入到Vue中:

import xmlFile from '../static/ABC.xml'

因为我可以通过使用直接导入本地json文件:

import jsonFile from '../static/XYZ.json'

但是它不适用于 xml 文件，我明白了:

Module parse failed. You may need an appropriate loader to handle this file type

(2) 借助vue-resouce:

this.$http.get('../static/ABC.xml').then(function(data)) {
     var xmlDoc = data;
}

但后来我得到了这个:

http://localhost:8080/static/ABC.xml 404 (Not Found)

似乎相对路径在 http 请求中不起作用。

(3) 通过使用 VueJS 中的旧代码:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if(this.readyState == 4 && this.status == 200) {
        var xmlDoc = this.responseXML;
    }
}
xhttp.open('GET', '../static/ABC.xml', true);

但是我在(2)中遇到了同样的问题。所以我认为相对路径不适合 http 请求，因为文件需要以某种方式进行编译和重新组织。

我知道用 Vue JS 加载和读取甚至编辑 xml 文件的情况很少见，但如果有人以前做过并指出我在这个阶段应该做什么，我将不胜感激。

Answer 1

我使用 Axios:

axios.get('http://localhost:8080/file.xml')
                .then(response => {
                    var xmlText = response.data;
});

因此您将 xml 文件放在静态文件夹中，但该文件夹被视为根文件夹。