axios请求本地json文件，打包后访问出错

最近在做一个Vue项目，其中使用了axios获取本地的json文件。在本地环境运行一切正常，但是一打包到服务器上访问时，所有的axios请求都出现了404错误。

经过查阅资料和排查后，我们发现是因为axios获取本地json时需要使用相对路径的方式来引入。而在打包后，路径会发生改变，导致axios请求的路径不正确，进而出错。

//axios获取本地json的代码
axios.get("./data.json")
.then(function (response) {
    console.log(response.data);
})
.catch(function (error) {
    console.log(error);
});

等价于=============================================================================================

const getData = async () =>{
try {
    const response = await axios.get('/data.json'); //这里的data.json是本地文件的地址，可根据实际情况进行修改
    const data = response.data;
    console.log(data); //打印数据
} catch (error) {
    console.error(error);
}
}
//最后我们调用函数即可
getData();

解决此问题的方法也很简单，只需要在获取本地json时，使用process.env.BASE_URL来拼接出正确的路径即可。

//axios获取本地json修改后的代码
axios.get(process.env.BASE_URL + "data.json")
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});

总之，axios获取本地json在打包后需要注意路径的改变，使用process.env.BASE_URL来获取正确的路径是解决该问题的关键。

温馨提示： 我的config.json是在vue项目的public下，异步方法写在main.js中