I am new to VueJS and want to re-write part of my plain Javascript SPA with Vue JS now (just for training and learning). I created my project with Vue-CLI. And here is a part of my file structure now:

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

I recently struggling with this problem:

I want to 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.

In my plain Javascript, it is very simple to do this by using:

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

And I can do every thing I need to the xmlDoc

But in Vue JS, I find it is very hard to load and read (parse) a xml file, even I searched a lot, I can't find a proper way to do it clean. I have already tried the following ways:

(1) By using the import to directly import the local xml file into Vue:

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

Because I can directly import local json file by using:

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

But it won't work for xml file, I got this:

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

But then I got this:

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

It seems like 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);

But I got the same problem in (2). So I think the relative path is just not right for a http request because the files need to be plied and re-organized somehow.

I know it's kind of rare to load and read even edit a xml file with Vue JS but I would appreciate it if someone has done it before and point out what I should do at this stage.

I am new to VueJS and want to re-write part of my plain Javascript SPA with Vue JS now (just for training and learning). I created my project with Vue-CLI. And here is a part of my file structure now:

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

I recently struggling with this problem:

I want to 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.

In my plain Javascript, it is very simple to do this by using:

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

And I can do every thing I need to the xmlDoc

But in Vue JS, I find it is very hard to load and read (parse) a xml file, even I searched a lot, I can't find a proper way to do it clean. I have already tried the following ways:

(1) By using the import to directly import the local xml file into Vue:

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

Because I can directly import local json file by using:

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

But it won't work for xml file, I got this:

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

But then I got this:

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

It seems like 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);

But I got the same problem in (2). So I think the relative path is just not right for a http request because the files need to be plied and re-organized somehow.

I know it's kind of rare to load and read even edit a xml file with Vue JS but I would appreciate it if someone has done it before and point out what I should do at this stage.

• javascript
• vue.js
• xmlhttprequest
• vuejs2
• vue-resource

1 Answer 1

I use Axios:

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

So you put the xml file in the static folder, but that one is considered as the root folder.