java怎么往xml文件里追加_如何在Vue中导入本地存储的xml文件并进行编辑？

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