如何使用 Vue.js 讀取 JSON 文件

在 Vue.js 中讀取 JSON 文件主要有兩種方法：使用 HTTP 請求或直接使用本地文件。

使用 HTTP 請求

要使用 HTTP 請求讀取 JSON 文件，可以使用 庫：

<code class="javascript">import axios from 'axios'

export default {
  methods: {
    readJSON() {
      axios.get('path/to/json/file.json')
        .then((response) =&gt; {
          // 處理讀取到的 JSON 數據
        })
        .catch((error) =&gt; {
          // 處理錯誤
        })
    }
  }
}</code>

使用本地文件

對于本地 JSON 文件，可以使用 函數：

<code class="javascript">export default {
  methods: {
    readJSON() {
      const json = require('path/to/json/file.json')

      // 處理讀取到的 JSON 數據
    }
  }
}</code>

注意事項

跨域問題：如果 JSON 文件托管在其他域上，在使用 HTTP 請求時需要考慮跨域問題。

文件路徑：指定 JSON 文件路徑時，確保路徑正確無誤。

數據格式：讀取到的 JSON 數據是 JavaScript 對象，可以使用點表示法或方括號表示法訪問其屬性。

錯誤處理：在使用 HTTP 請求時，務必處理可能發生的錯誤。