반응형
Vue를 사용하여 현재 디렉토리 내의 파일 읽기
.vue 파일이 있는 디렉터리에 있는 텍스트 파일 데이터를 가져오려고 합니다.하지만 크롬과 파이어폭스 모두에서 텍스트가 반환되지 않습니다.대신 텍스트 파일의 내용이 아닌 다음 응답이 반환됩니다.
<!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>
안녕의 내용txt가 뒤따르고 있습니다.
hello
웹 팩을 사용하시는 것 같은데, 웹 팩을 사용하시려면.vue파일링(파일링)vue-loader웹 팩 플러그인)...
를 사용하여 를 로드할 수 있습니다..txt문자열로 파일합니다.
설치하다
raw-loader다음을 포함한 NPM:npm i -D raw-loader에서 사용하도록 웹 팩을 설정합니다.
raw-loader위해서*.txt:module.exports = { //... chainWebpack: config => { config.module .rule('raw') .test(/\.txt$/) .use('raw-loader') .loader('raw-loader') .end() }, }컴포넌트의
.vue파일, 또는 로드하기 위해 사용hello.txt:<script> import helloText from './hello.txt'; // OR: const helloText = require('./hello.txt') export default { //... methods: { getPoemList () { console.log({ helloText }); } } } </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>
언급URL : https://stackoverflow.com/questions/54697757/read-file-inside-current-directory-using-vue
반응형
'programing' 카테고리의 다른 글
| 회의실 - 주석 프로세서에 스키마 내보내기 디렉토리가 제공되지 않으므로 스키마를 내보낼 수 없습니다. (0) | 2022.08.27 |
|---|---|
| JPA 엔티티가 Serializable 인터페이스를 구현하는 시기와 이유는 무엇입니까? (0) | 2022.08.27 |
| Vuex 저장소 개체의 속성에 액세스할 수 없습니다. (0) | 2022.08.27 |
| printf anomaly 뒤에 "printf"가 표시됩니다 (0) | 2022.08.27 |
| C#의 #region에 해당하는 Java (0) | 2022.08.27 |