Vue 使用 local’s json 方法

通常靜態的檔案會放到 server 上在用非同步的方式來使用。但如果我們使用 Vue 時，要使用本機上的 json 時要如何處理呢？

將 json 放在 src/assets 裡，透過以下的方式：

import db from '@/assets/db.json';

@ 指 src 資料夾

Code

// 使用或  
created () {
   console.log(db)   // 得到 db 數據
}

使用 axios

先安裝

npm install axios --save

引用

main.js

import axios from 'axios'

在 Vue-cli 專案中， axios 無法從自定義檔案夾中取得資料。
使用 static 用於儲存 json 的檔案夾。(跟 src 同層)
然後路徑指向該位置。

或放在 public 資料夾建立 js 資料夾，將 json 放入，再使用。

Code

mounted() {
     let url = '/static/db.json';
     axios.get(url).then((response) => {
     this.posts = response.data;
     console.log(this.posts);
      }).catch(error => {
            console.log(error);
          })
      },