前端高频场景面试题与实战解答

9. Axios 挂载到原型上的作用

将 Axios 挂载到原型后，各组件可直接调用，无需重复引入，简化代码结构。

10. 如何判断项目所处环境

1. 查看 IP 和端口地址。
2. 检查启动项目的脚本或命令。

11. CLI 版本与 src 目录结构

常见版本参考：

• Vue: 2.6.10
• Vuex: 3.1.0
• Vue-cli: 4.4.4
• Webpack: 4.4.0

src 目录通常包含：

• api: 接口请求
• assets: 静态资源
• components: 公共组件
• icons: 字体图标
• router: 路由配置
• store: Vuex 状态管理
• utils: 工具函数
• views: 页面级路由

12. 组件封装经验分享

采用组件化思想，创建 views（页面级）和 components（公共组件）目录。例如评论组件抽离为独立模块，头部组件抽象通用逻辑。

HeaderTop 组件示例：

<template>
  <div class="header-top">
    <slot name="left"></slot>
    <div>{{ title }}</div>
    <slot name="right"></slot>
  </div>
</template>

<script>
export default {
  props: ['title'],
  components: { HeaderTop }
}
</script>

使用方式：

<HeaderTop title="标题">
  <div slot='left'>左边内容</div>
  <div slot='right'>右边内容</div>
</HeaderTop>

13. 项目权限控制实现

针对后台管理系统不同角色（如 admin、editor），通过路由元信息控制访问权限：

1. 路由声明：在 router.js 中通过 meta 标签标记所需角色，如 { role: ['admin', 'super_editor'] }。
2. 动态路由：登录后获取用户角色，对比路由表，调用 router.addRoutes 生成可访问路由表并存入 Vuex。
3. 菜单渲染：根据 Vuex 中的可访问路由渲染侧边栏组件。

14. Axios 封装流程

1. 在 Utils/request.js 中引入 Axios，配置基础路径、请求/响应拦截器并导出实例。
2. 在 api 文件中引入该实例，按业务模块配置具体接口请求文件。

15. PC 端兼容性问题

1. img 留白：设置 display: block。
2. IE9- 边框：给 img 设定 border: none。
3. IE8 rgba 不支持：改用 opacity。
4. min-height 不兼容 IE6/7：组合使用 min-height, height: auto !important, height: 200px, overflow: visible。

16. 移动端兼容性问题

1. 音视频自动播放：iOS/Android 需用户交互触发，监听 touchstart 事件播放。
2. 输入法空格：正则替换  。
3. 点击延迟：引入 FastClick 解决 300ms 延迟。
4. 键盘遮挡输入框：监听窗口 resize 事件，检测键盘弹出高度，动态切换样式类（如 .focusState）调整布局。

17. 移动端真机测试方法

1. 部署至公司测试服务器，手机直接访问。
2. 本地搭建服务，确保手机与电脑同局域网，通过 IP 访问。

18. H5 与 App 的区别

1. 访问方式：H5 通过链接，App 通过应用程序。
2. 分发渠道：H5 无应用商店，App 有。
3. 上线审核：H5 无需审核，App 需审核。
4. 性能体验：H5 响应速度通常慢于 App。
5. 开发成本：H5 开发成本低于 App。

以上总结涵盖了前端开发中常见的技术难点与面试考点，实际工作中可根据具体需求灵活调整。