Как импортировать локальный файл XML в Vue и редактировать его? - PullRequest
Новая
       23

Как импортировать локальный файл XML в Vue и редактировать его?

0 голосов
/ 13 июня 2018

Я новичок в VueJS и хочу переписать часть моего простого Javascript SPA с помощью Vue JS (только для тренировок и обучения). Я создал свой проект с помощью 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) Используя импорт для прямого импорта локального 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-запроса, потому что файлы нужно как-то компилировать и реорганизовывать.

Я знаю, что довольно редко можно загружать и читать, даже редактировать XML-файл с помощью VueJS, но я был бы признателен, если бы кто-то сделал это раньше, и указал бы, что я должен делать на этом этапе.

1 Ответ

0 голосов
/ 14 августа 2018

Я использую Axios: 

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

Таким образом, вы помещаете XML-файл в статическую папку, но этот файл считается корневой.

...