项目-CSDN博客

本文链接：https://blog.csdn.net/weixin_44848645/article/details/113927828

本文介绍了前端项目中关于目录结构、插件引入、路由封装、Storage封装、接口错误拦截和环境配置的实践。讲解了如何处理接口错误，实现未登录拦截，并提供了Mock数据的设置方法，包括本地创建JSON和使用Easy-Mock平台。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

目录结构设置

引入基本插件

cnpm i vue-lazyload element-ui node-sass sass-loader vue-awesome-swiper vue-axios vue-cookie --save-dev

封装路由

Tips

Ctrl+D 可以不停的定位下一个

Storage的封装

面试题

Cookie 、localStorage、sessionStorage三者区别

为什么要封装Storage，本身不是已经有API？

在这里插入图片描述

接口错误拦截

统一报错
未登录统一拦截
请求值、返回值统一处理

#在main.js中使用vue-axios
import axios from 'axios'
import VueAxios from 'vue-axios'

#根据前端的跨域方式做调整
axios.defaults.baseURL = '/api';
axios.defaults.timeout = 8000; #超时

axios.interceptors.response.use(function(response){
    let res = response.data;#res就是我们后台返回的值
    #判断逻辑
    if(res.status == 0) {
        return res.data;
    } else if(res.status == 10) {
        window.location.href = '/#/login';
    } else {
        alert(res.msg);
    }
})

Vue.use(VueAxios,axios);
Vue.config.productionTip = false