vue裡的axios如何獲取本地json數據

Posted on by

使用axios獲取本地json數據

第一步：在已有的vue項目中安裝axios命令

npm install --save axios

第二步：在main.js裡導入下面的代碼

import axios from 'axios'

第三步：在static文件夾下添加testData文件夾，在這個文件夾下添加data.json文件

第四步：在需要數據的頁面引入axios，異步加載數據

import axios from 'axios';
export default {
	name:"",
	data() {
		return{}
	},
	mounted(){
		this.loadData();
	},
	methods:{
		async loadData(){
			await axios.get("http://localhost:8080/static/testData/data.json").then(res =>{
			console.log(res);
			})
		}
	}
}

使用axios獲取本地json文件,報404錯

昨天剛寫的文章，使用axios獲取到本地json文件，今天重啟項目莫名其妙就報錯瞭

又查詢瞭一番，折騰瞭幾個小時，找不出原因。重新百度瞭一番，最終解決。但是再下次運行是否還會報錯，不太確定，畢竟沒有找到最終的原因。

解決方案：main.js裡

import axios from "axios";
Vue.prototype.axios = axios;

json文件存放在public文件夾下

在要用到的頁面上

網上的教程一直都有要在main.js裡加那兩行代碼，但是我發現我註掉的話也不影響結果。

所以嘗試的時候還是按自己的來，能出來效果就行

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：