Чтение файла в текущем каталоге с помощью Vue - PullRequest
Новая
       1

Чтение файла в текущем каталоге с помощью Vue

0 голосов
/ 14 февраля 2019

Я пытаюсь получить данные текстового файла, расположенные в том же каталоге, где находится мой файл .vue.Но он не возвращает текст как в Chrome, так и в Firefox.Вместо этого он возвращает следующий ответ, который не является содержимым моего текстового файла.

<!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>

Ниже приведен мой файл VUE.

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

Содержимое hello.txt следующее.

hello

1 Ответ

0 голосов
/ 15 февраля 2019

Я предполагаю, что вы используете Webpack, поскольку у вас есть файл .vue (требуется плагин vue-loader Webpack) ...

Вы можете использовать raw-loader для загрузки файла .txt в виде строки.

  1. Установка raw-loader из NPM с: 

    npm i -D raw-loader

  2. В <projectroot>/vue.config.js настройте Webpack на использование raw-loader для *.txt: 

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

  3. В файле .vue вашего компонента используйте import или require для загрузки hello.txt: 

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

export default {
  //...
  methods: {
    getPoemList () {
      console.log({ helloText });
    }
  }
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...