你写项目的时候碰到过印象里比较深刻的一些bug或困难，你怎么解决的？ #

404 #

遇到的bug：当输入url中没有在路由配置中配置过的路径时，页面它会出现空白，并且浏览 器发出警告，如果我这个项目上线的话，可能会造成用户的体验不友好和搜索引擎不友 好。

配置 404页面 解决办法：在路由配置中再配置一个404页面的路径，这样就能使用户不管怎么输入不合规 的url后，都会提示用户输错了网址。

{
path: '/404',
name: 'NotFound',
component: () => import('@/views/NotFound/Index.vue')
},
// 所有未定义路由，全部重定向到404页
{
path: '/:pathMatch(.*)',
redirect: '/404'
}

搜索界面节流 #

遇到的bug：在搜索界面的时候，当我一直点击搜索时，它会频繁的进行请求，造成了不必 要的性能损耗。

图片和组件的懒加载 #

我做的项目使用了很多的组件页面和大量的图片，导致在加载页面时耗时比较 久，以及在页面的切换时很多暂时不需要的页面组件一次性全部加载了，导致整个项目的 性能非常差。

解决办法： 图片懒加载：在App.vue中引入VueLazy并且使用app.use启用它，然后把图片中的src改成 v-lazy

页面组件懒加载：在router配置中的component，把直接在代码一开始引入组件页面，改 成箭头函数式引入。

{
path: '/',
component: () => import('@/views/Home/Home.vue')
},

axios响应拦截 #

遇到bug：我是使用mockjs来模拟后端的接口，当时我在设置端口的返回值时，我返回数据 有一个状态码以及把json数据中export出来的detail数据添加到data这个需要返回的数据 （代码如下），这导致我在获取接口里的数据时需要多.data(引用一层data)，当时我没意 识，结果一直获取不到数据。

Mock.mock(/\/detail/, 'get', () => {
return {
code: 0, // 返回状态码
data: detail // 返回数据
}
})
js
复制代码
import axios from "axios";
// 响应拦截器
axios.interceptors.response.use((res) => {
return res.data
})