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

【问题标题】：Read file inside current directory using Vue使用Vue读取当前目录中的文件
【发布时间】：2019-07-08 21:56:09
【问题描述】：

我正在尝试获取位于我的 .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

【问题讨论】：

你试过像./hello.txt一样吗？检查相对和绝对路径

标签： javascript ajax vue.js vuejs2 xmlhttprequest

【解决方案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>

【讨论】：

我安装了 raw-loader。使用上述内容创建了一个文件 /vue.config.js。导入文本文件并尝试记录文本文件的内容。我收到以下错误。模块解析失败：意外令牌 (1:6) 您可能需要适当的加载程序来处理此文件类型。
而不是从'./hello.txt'导入helloText；以下工作。从'raw-loader!./hello.txt'导入helloText；
您可能需要合适的加载器来处理此文件类型，目前没有配置加载器来处理此文件。

【解决方案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>

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。
欢迎来到 Stack Overflow。请收下tour 并阅读How to Answer。