Question

我通过@vue/cli 3.0创建了一个示例Vue应用程序：

vue create testapp
cd testapp
npm run serve

作为mounted()的一部分，我想fetch一些本地数据：

fetch("users.json")
   .then(r => r.json())
   .then(r => this.users = r.hits.hits.map(x => x._source))

其中users在data()中定义。

响应为

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>example.com</title>
  <link href="/about.js" rel="prefetch"><link href="/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but example.com doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  <script type="text/javascript" src="/app.js"></script></body>
</html>

我试图将JSON文件移至应用程序根目录中的static（与src相同的级别，然后移至assets，然后移至我能想到的所有地方-答案总是来自应用程序，它假定这是对HTML / JS / CSS内容的请求，而不是原始数据。

此类静态文件应放在哪里？

Answer 1

您可以在开始时将JSON分配到数据中，请在App.vue

中尝试

<template>
    <div>
        <div v-for="user in users">{{user}}</div>
    </div>
</template>
<script>
    import json from './users.json'
    export default{
        data(){
           return{
              users: json
            }
        }
    }
</script>

还要确保您的main.js已导入App.vue

import Vue from 'vue'
import App from './App'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

将您的users.json与src位于同一级别（与App.vue相同）是可以的。

希望这对您有所帮助！干杯

如何在Vue SPA中获取JSON数据？

1 个答案: