Vue CLI 4.2.3项目中本地JSON文件的使用及编辑问题

Hey there! Let's walk through how to use a local JSON file for your Vue CLI 4.2.3 app, plus tackle your question about editing it directly.

First, let's get your JSON file set up and connected to your component.

Step 1: Add the JSON File to Your Project #

Create a data folder inside your src directory, then add a file named heroData.json with your corrected JSON (I fixed the extra trailing comma for you):

[
  {
    "heroTitle": [
      "Banner image",
      "assets/images/banner/sunset.jpg",
      "sunset.jpg"
    ]
  }
]

Step 2: Import and Use the JSON in Your Component #

You can directly import the JSON file into your component and bind its data to your template. Here's how to update your component code:

<template>
  <header>
    <div class="hero">
      <!-- Bind the banner title from JSON -->
      <h1 class="hero__title">{{ heroData[0].heroTitle[0] }}</h1>
      <!-- Use v-bind (:src) for dynamic image paths -->
      <img :src="heroData[0].heroTitle[1]" :alt="heroData[0].heroTitle[2]" />
    </div>
  </header>
</template>

<script>
// Import the JSON file using Vue's alias (@ points to the src folder)
import heroData from '@/data/heroData.json'

export default {
  data() {
    return {
      // Assign the imported JSON to a component data property
      heroData: heroData
    }
  }
}
</script>

A quick note: Use :src instead of plain src for the image—this tells Vue to treat the value as a dynamic data binding, not a static string.

Alternative: Fetch the JSON File (For Public Folder) #

If you prefer to place your JSON in the public folder (so it's served as a static asset without being bundled), you can use fetch to load it:

<template>
  <header>
    <div class="hero" v-if="heroData">
      <h1 class="hero__title">{{ heroData[0].heroTitle[0] }}</h1>
      <img :src="heroData[0].heroTitle[1]" :alt="heroData[0].heroTitle[2]" />
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      heroData: null
    }
  },
  mounted() {
    // Fetch the JSON from the public folder
    fetch('/data/heroData.json')
      .then(res => res.json())
      .then(data => this.heroData = data)
      .catch(err => console.error('Failed to load JSON:', err))
  }
}
</script>

Just make sure to create public/data/heroData.json for this approach.

Short answer: No, you can't edit the local JSON file directly from the running web app. Here's why:

• When you build your Vue app (npm run build), all files (including the JSON) are bundled into static assets in the dist folder. Browsers can only read these assets—they don't have permission to modify files on the server (or your local machine, if you're running the dev server).
• Even in development mode, any "edits" you make would only affect the copy of the JSON in your project files on your dev machine—not what users see in their browsers.

Alternative Solutions for Editable Data #

If you need users to modify and save data, here are two common approaches:

• LocalStorage/SessionStorage: Store modified data in the user's browser. This keeps data persistent between page reloads, but it's only stored on the user's device. Here's a quick example:

  <template>
    <header>
      <div class="hero">
        <h1 class="hero__title">{{ currentHero.heroTitle[0] }}</h1>
        <img :src="currentHero.heroTitle[1]" :alt="currentHero.heroTitle[2]" />
        <!-- Edit the title and save on blur -->
        <input v-model="currentHero.heroTitle[0]" @blur="saveData" />
      </div>
    </header>
  </template>
  
  <script>
  import heroData from '@/data/heroData.json'
  
  export default {
    data() {
      return {
        currentHero: {}
      }
    },
    mounted() {
      // Load saved data from localStorage, or use default JSON
      const saved = localStorage.getItem('heroData')
      this.currentHero = saved ? JSON.parse(saved)[0] : heroData[0]
    },
    methods: {
      saveData() {
        // Save modified data to localStorage
        localStorage.setItem('heroData', JSON.stringify([this.currentHero]))
      }
    }
  }
  </script>
  

• Backend API: For data that needs to be shared across users or persist on a server, you'll need a backend service (like Node.js, PHP, or Firebase) that handles writing data to a file or database. Your Vue app would send requests to this API to update data.

内容的提问来源于stack exchange，提问作者Ajaya Bajracharya