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

Question

我是网络开发的初学者。 我正在使用 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, timeout: 0, withCredentials: false, 上传: XMLHttpRequestUpload, ...} onabort: null onerror: null onload: null onloadend: null onloadstart: null onprogress: null onreadystatechange: null ontimeout: null 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: 意外的标记

---

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

Answer 1

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

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