Question

我是Web开发的初学者。我正在使用vue-cli3.0和本地服务器。

<template>
    <div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  components: {
  },
})

export default class Test extends Vue 
{
  mounted(){
      this.readJson("./resources/doc.json")
  }

    readJson(filePath) {
        var request = new XMLHttpRequest();
        request.open("GET",filePath, false);
        console.log(request)
        // request.send(null)
        // var my_JSON_object = JSON.parse(request.responseText);
        // alert (my_JSON_object.result[0]);
    }
}
</script>

当我console.log（request）时，请求内部就是这样。

XMLHttpRequest {onreadystatechange：null，readyState：1，超时：0， withCredentials：false，上载：XMLHttpRequestUpload，…} onabort：空 onerror：空onload：空onloadend：空onloadstart：空 onprogress：空onreadystatechange：空ontimeout：空readyState： 1个响应：“” responseText：“” responseType：“” responseURL：“” responseXML：空状态：0 statusText：“”超时：0上传： XMLHttpRequestUpload {onloadstart：null，onprogress：null，onabort： null，onerror：null，onload：null，…} withCredentials：false 原始：XMLHttpRequest

它们都是空的。

请帮助我。

我不能在这里写导入。

所以我不想使用导入。

谢谢您的回答。

<template>
    <div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  components: {
  },
})

export default class Test extends Vue 
{
  mounted(){
      this.readJson(require("./resources/doc.json"))
  }

    readJson(filePath) {
        var request = new XMLHttpRequest();
        request.open("GET",filePath, false);
        console.log(request)
        request.send(null)
        var my_JSON_object = JSON.parse(request.responseText);
        alert (my_JSON_object.result[0]);
    }
}
</script>

我这样更改了代码。

但是内部请求仍然相同。

错误

vue.runtime.esm.js？2b0e：587 [Vue警告]：挂接的钩子出错： “ SyntaxError：JSON中位置0处的意外令牌<”

但是我发现在“ filePath.ngldoc”里面有数据！这是数据javascript对象吗？

Answer 1

您可能应该使用this.readJson(require("./resources/doc.json"))。

有关可用选项的详细说明，请参见the vue-cli dos on static asset handling。

如何在vue.js中读取json文件

1 个答案: