Question

我正在尝试获取文本文件数据，该文件位于我的.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

Answer 1

我假设您正在使用Webpack，因为您有一个.vue文件（需要vue-loader Webpack插件）...

您可以使用raw-loader来将.txt文件作为字符串加载。

使用以下命令从NPM安装raw-loader：
```
npm i -D raw-loader
```

在<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()
  },
}

在组件的.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>

Answer 2

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

使用Vue读取当前目录中的文件

2 个答案: