title: How to import a local stored xml file in Vue and edit it?
body: <p>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). <strong>I created my project with Vue-CLI</strong>. And here is a part of my file structure now:</p>
  
  <pre><code>---src
     |---assets
         |---logo.png
     |---components
         |---loadXML.vue
         |---table01.vue
         |---table02.vue
     |---static
         |---ABC.xml
     |---app.vue
  </code></pre>
  
  <p>I recently struggling with this problem:</p>
  
  <p>I want to <strong>load and read a <em>local stored xml-file</em> (in static folder) into Vue instance and later parse through it and do some edit on it</strong>.</p>
  
  <p>In my plain Javascript, it is very simple to do this by using:</p>
  
  <pre><code>var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if(this.readyState == 4 &amp;&amp; this.status == 200) {
          var xmlDoc = this.responseXML;
      }
  }
  xhttp.open('GET', 'ABC.xml', true);
  </code></pre>
  
  <p>And I can do every thing I need to the <code>xmlDoc</code></p>
  
  <p>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:</p>
  
  <p><strong>(1) By using the import to directly import the local xml file into Vue:</strong></p>
  
  <pre><code>import xmlFile from '../static/ABC.xml'
  </code></pre>
  
  <p>Because <strong>I can directly import local json file</strong> by using:</p>
  
  <pre><code>import jsonFile from '../static/XYZ.json'
  </code></pre>
  
  <p>But <strong>it won't work for xml file</strong>, I got this:</p>
  
  <pre><code>Module parse failed. You may need an appropriate loader to handle this file type
  </code></pre>
  
  <p><strong>(2) With help of vue-resouce:</strong></p>
  
  <pre><code>this.$http.get('../static/ABC.xml').then(function(data)) {
       var xmlDoc = data;
  }
  </code></pre>
  
  <p>But then I got this:</p>
  
  <pre><code>http://localhost:8080/static/ABC.xml 404 (Not Found)
  </code></pre>
  
  <p>It seems like <strong>the relative path will not work within the http request</strong>.</p>
  
  <p><strong>(3) By using the old code in VueJS:</strong></p>
  
  <pre><code>var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
      if(this.readyState == 4 &amp;&amp; this.status == 200) {
          var xmlDoc = this.responseXML;
      }
  }
  xhttp.open('GET', '../static/ABC.xml', true);
  </code></pre>
  
  <p>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 complied and re-organized somehow.</p>
  
  <p>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.</p>