Vue에서 로컬로 저장된 xml 파일을 가져오고 편집하려면 어떻게 해야 합니까?

Vue에서 로컬로 저장된 xml 파일을 가져오고 편집하려면 어떻게 해야 합니까?

저는 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 인스턴스에 로드하여 읽은 후 나중에 해당 파일을 구문 분석하고 편집하려고 합니다.

저의 플레인 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) Import를 사용하여 로컬 xml 파일을 Vue로 직접 Import함으로써 다음 작업을 수행합니다.

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-resource의 도움을 받아:

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 파일을 로드하고 읽는 일이 드물다는 것을 알지만, 이전에 이 작업을 수행한 적이 있는 사람이 있다면 이 단계에서 무엇을 해야 하는지 알려주시면 감사하겠습니다.

Axios 사용:

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

따라서 xml 파일을 정적 폴더에 넣지만 해당 파일은 루트 폴더로 간주됩니다.

언급URL : https://stackoverflow.com/questions/50833398/how-to-import-a-local-stored-xml-file-in-vue-and-edit-it