如何在Vue中导入本地存储的xml文件并进行编辑？-Java 学习之路

我是VueJS的新手，现在想用Vue JS重新编写我的普通Javascript SPA的一部分（仅用于培训和学习） . I created my project with Vue-CLI . 现在这是我文件结构的一部分：

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

我最近在努力解决这个问题：

我想 load and read a local stored xml-file (in static folder) into Vue instance and later parse through it and do some edit on it .

在我的普通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) By using the import to directly import the local xml file into Vue:

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

因为 I can directly import local json file 使用：

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

但 it won't work for xml file ，我得到了这个：

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

(2) With help of vue-resouce:

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

但后来我得到了这个：

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

好像 the relative path will not work within the http request .

(3) By using the old code in 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文件是很少见的，但如果有人以前做过并指出我应该在这个阶段做什么，我将不胜感激 .

1 回答

0
我使用Axios：
```
axios.get('http://localhost:8080/file.xml')
                .then(response => {
                    var xmlText = response.data;
});
```
因此，您将xml文件放在静态文件夹中，但该文件被视为根文件夹 .
回复于 2024-04-29T13:50:20+08:00

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

1 回答

相关问题