Vue+axios請求本地json

axios請求本地json,相關依賴安裝

1：npm安裝

npm install axios --save
複製代碼

2.在main.js下引用axios

import axios from 'axios'
複製代碼

一切環境依賴搭建好以後,下面來寫個例子：axios請求本地json

1：在static文件夾底下新建json文件，（ 本地JSON文件必定要需放在static文件夾之下。）

訪問服務器文件，應該把 json文件放在最外層的static文件夾，這個文件夾是vue-cli內置服務器向外暴露的靜態文件夾。

2：data.json數據格式以下：

{
    "first":[
        {"name":"王小婷","nick":"祈澈菇涼"},
        {"name":"安安","nick":"壞兔子"},
        {"name":"編程微刊","nick":"簡書"}

    ]
}
複製代碼

3：寫一個axios

getData() {
                axios.get('../../static/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
複製代碼

4：總體代碼以下：

<template>
    <div id="app">
    </div>
</template>
<script>
    import axios from "axios";
    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                axios.get('../../static/data.json').then(response => {
                    console.log(response.data);
                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

複製代碼

5：前臺顯示：

---

原文做者：祈澈姑娘