Ahm*_*med 3 javascript ajax xmlhttprequest vue.js vuejs2
我正在尝试获取位于我的 .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
我假设您正在使用 Webpack，因为您有一个.vue文件（需要vue-loaderWebpack 插件）...
您可以使用raw-loader将.txt文件作为字符串加载。
raw-loader从 NPM安装：
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>
| 归档时间： |
|
| 查看次数： |
15648 次 |
| 最近记录： |