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实例中，然后解析它并对其进行一些编辑。< / p>

在我的普通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）使用导入将本地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文件放在静态文件夹中，但是该文件被视为根文件夹。

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

1 个答案: