javascript - Read file inside current directory using Vue

I'm trying to get text file data located in the same directory where my .vue file is. But it's not returning the text on both chrome and firefox. Instead it's returning following response, which is not the content of my text file.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>router-project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

Following is my vue file.

<template>
  <body>
    <div> hello world </div>
  </body>
</template>

<script>
var $ = require('jquery');
window.jQuery = $;

export default {
  data () {
    return {
    }
  },
  created () {
    this.getPoemList(),
  },

  methods: {
   getPoemList () {

      function reqListener () {
         console.log(this.responseText);
      }

      var oReq = new XMLHttpRequest();
      oReq.addEventListener("load", reqListener);
      oReq.open("GET", "hello.txt");
      oReq.send();


    }   // getPoemList function ends
  }     // methods end
}       // export default ends
</script>

<style scoped>
</style>

Contents of hello.txt are following.

hello

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>router-project</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

Following is my vue file.

<template>
  <body>
    <div> hello world </div>
  </body>
</template>

<script>
var $ = require('jquery');
window.jQuery = $;

export default {
  data () {
    return {
    }
  },
  created () {
    this.getPoemList(),
  },

  methods: {
   getPoemList () {

      function reqListener () {
         console.log(this.responseText);
      }

      var oReq = new XMLHttpRequest();
      oReq.addEventListener("load", reqListener);
      oReq.open("GET", "hello.txt");
      oReq.send();


    }   // getPoemList function ends
  }     // methods end
}       // export default ends
</script>

<style scoped>
</style>

Contents of hello.txt are following.

hello

Share Improve this question edited Feb 15, 2019 at 5:34 tony19 138k23 gold badges277 silver badges346 bronze badges asked Feb 14, 2019 at 19:27 Ahmed 931 gold badge1 silver badge5 bronze badges

Did you try like ./hello.txt? Check relative and absolute paths – Nikolay Vetrov Commented Feb 14, 2019 at 21:17
How can this be achieved if you're using Vite instead of webpack? – Eric McWinNEr Commented Jun 12, 2022 at 15:26

Add a ment |

3 Answers 3

Sorted by: Reset to default 14

I assume you're using Webpack, since you have a .vue file (requiring the vue-loader Webpack plugin)...

You can use raw-loader to load the .txt file as a string.

Install raw-loader from NPM with:
```
npm i -D raw-loader
```

In <projectroot>/vue.config.js, configure Webpack to use raw-loader for *.txt:

module.exports = {
  //...
  chainWebpack: config => {
    config.module
      .rule('raw')
      .test(/\.txt$/)
      .use('raw-loader')
      .loader('raw-loader')
      .end()
  },
}

In your ponent's .vue file, use import or require to load hello.txt:

<script>
import helloText from './hello.txt';  // OR: const helloText = require('./hello.txt')

export default {
  //...
  methods: {
    getPoemList () {
      console.log({ helloText });
    }
  }
}
</script>

If you are using the Vite builder (e.g. when using the Vuetify framework) you can load a static asset as string without additional dependencies:

<script setup>
import hello from './hello.txt?raw'
const content = ref(hello)
</script>

Access it in your method like this:

<script>
export default {
  //...
  methods: {
    getPoemList () {
      console.log(content);
    }
  }
}
</script>

<template>
  <body>
    <div> hello world {{variable}}</div>
  </body>
</template>

<script>
  var $ = require('jquery');
  window.jQuery = $;

  export default {
    data() {
      return {
        variable: "",
      }
    },
    mounted() {

      methods: {
        // create a vm variable pointing this
        const vm = this;

        function reqListener() {
          // captures the local value this.responseText to vm (this vuejs) vm.variable
          vm.variable = this.responseText;
          console.log(this.responseText);
        }

        var oReq = new XMLHttpRequest();
        oReq.addEventListener("load", reqListener);
        oReq.open("GET", "hello.txt");
        oReq.send();


      }
    }
  }

</script>

<style> </style>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Read file inside current directory using Vue - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)