在進行前端開發時，我們經常需要訪問不同域名下的數據，面臨著跨域訪問的問題。近年來，axios已經成為前端開發中重要的Ajax庫之一，它提供了一個簡單易用的API，讓我們可以輕松地進行跨域訪問，下面我們來說明如何使用axios訪問json文件。

首先，我們需要安裝axios，可以通過npm進行安裝：

npm install axios

安裝完畢之后，我們就可以在項目中引入axios了：

import axios from 'axios';

然后，我們需要設置axios的配置，讓它可以進行跨域訪問。在項目中創建一個config.js文件，輸入以下代碼：

const axiosCondig = {
baseURL: 'http://localhost:3000',
timeout: 10000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
};
export default axiosCondig;

這里我們設置了axios的baseURL為http://localhost:3000，也就是我們要請求的json文件所在的服務器地址。同時，timeout設置為10秒，headers設置為Content-Type為json格式。

接下來，我們在需要使用axios的地方引入config.js文件：

import axiosConfig from '@/config';
import axios from 'axios';
axios.defaults.baseURL = axiosConfig.baseURL;
axios.defaults.timeout = axiosConfig.timeout;
axios.defaults.headers = axiosConfig.headers;

這樣，我們就完成了axios跨域訪問的設置。接下來我們來一個例子演示如何使用axios訪問json文件：

// 在Vue組件中
export default {
name: 'Example',
data () {
return {
jsonData: {}
}
},
mounted () {
this.getJsonData();
},
methods: {
getJsonData () {
axios.get('/test.json')
.then(res =>{
this.jsonData = res.data;
})
.catch(error =>{
console.log(error);
})
}
}
}

在上面的代碼中，我們首先通過axios的get方法請求test.json文件，返回的是一個Promise對象，然后我們使用then和catch方法對請求結果進行處理。

以上就是使用axios訪問json文件的詳細介紹。通過這篇文章的學習，我們可以了解到如何設置axios的跨域訪問配置，以及如何使用axios訪問json文件。