在VUE中封装API接口

在前端vue的开发中，有一点是必须要做的，那就是将所有的API接口封装起来，因为从开发到最终上线的过程中，API是需要经常更换的，所以需要将API封装起来，便于修改和更换。

在所有的API中，每一个API都会分成两个部分，比如：
https://easy-mock.com/mock/5bcd8e154994296c2af093ea/SmileVue/index；这是分成基本路径和最后的 index 两部分的，一般情况下如果需要更换API的时候，只是更换前半部分，最后的 index 是不会改变的。所以这就好办了。

在 src 目录下新建一个 serviceAPI.config.js 文件，然后在文件中写入：

const BASEURL = 'https://easy-mock.com/mock/5bcd8e154994296c2af093ea/SmileVue/'
const URL = {
    getShoppingMallInfo : BASEURL + 'index',
    getGoodsInfo : BASEURL + 'getGoodsInfo',
}

module.exports = URL

这就封装完了一个 API 配置文件了，然后在调用的时候，直接引入即可：

//引入serviceAPI
            import url from '@/serviceAPI.config.js'
            axios({
                // 调用 serviceAPI
                url:url.getShoppingMallInfo,
                methods:'get',
            }).then(res =>{
                console.log(res.data);
            }).catch(err => {
                console.log(err);
            })