文章内容输出来源：拉勾大前端高薪训练营

1.说说 application/json 和 application/x-www-form-urlencoded 二者之间的区别。

答：

application/json 会走预检请求，而 application/x-www-form-urlencoded属于简单请求所以不会。
application/json 可读性良好，application/x-www-form-urlencoded可读性差尤其是请求参数为数组及对象嵌套时。
application/json 对初学者友好，application/x-www-form-urlencoded中数组参数情况时对初学者算噩梦。
application/x-www-form-urlencoded是表单提交的默认请求内容格式。

2.说一说在前端这块，角色管理你是如何设计的。

答：

角色管理就是增删改查逻辑
角色一般和功能菜单是多对多关系
角色管理中可以给角色分配功能菜单

３.@vue/cli 跟 vue-cli 相比，@vue/cli 的优势在哪？

答：

抽取出单独的命令行服务层即Cli + Service Layer。

Cli层：Vue全局命令行，主要用于项目创建和管理，包含vue create、vue ui等命令。Cli命令相对较少，所以更新并不频繁。
Service Layer: 负责实际项目的构建。这部分更新频繁，通常作为项目的部分依赖。

灵活的插件机制。
舒适和直观的图形用户界面GUI。
快速原型开发。支持直接运行单个Vue文件。
支持现代开发模式。带有高级代码的高级浏览器(ES6+)，在兼容旧版本浏览器的同时，高级代码无论文件大小或脚本解析效率都得到了提高。

４.详细讲一讲生产环境下前端项目的自动化部署的流程。

答：
这里以Vue项目+docker容器的自动化部署为例，进行流程说明（假设已安装了docker环境）：

打开Vue项目的打包配置文件（vue/cli项目为config/index.js, @vue/cli项目为vue.config.js）

改变打包目录到相对路径（一般为dist目录）

在项目根目录下创建dockerfile文件(这里选择较小的Alpine镜像)

FROM node:lts-alpine  
  
# 安装http服务用于提供静态内容  
RUN npm install -g http-server  
  
# 假设app目录为当前工作目录  
WORKDIR /app  
  
# 复制package.json以及package-lock.js  
COPY package*.json ./  
  
# 安装项目依赖 
RUN npm install  
  
# 复制项目文件及文件夹到当前工作目录（这里是app）  
COPY . .  
  
# 运行生产环境打包命令，生成打包目录dist  
RUN npm run build  
# 设置端口
EXPOSE 8080  
# 启动http服务
CMD [ "http-server", "dist" ]

进入项目根目录并执行打包命令(假设Vue项目名称为myvue)

docker build -t myvue .

打包后，执行如下命令查看前端镜像容量

docker images

运行前端服务

docker run -it --rm -p 8081:8080 myvue

整个自动化部署流程结束。

５.你在开发过程中，遇到过哪些问题，又是怎样解决的？请讲出两点。

答：
问题1. 前端实现财报组件，需要合计指标在前端动态计算

这样解决：定义了统一的财报结构对象，根据合计指标的计算公式采用Founction构造函数解决。

问题2. 封装了自定义正则输入框组件，不知道怎么与ElementUI原生的el-form集成以便共用验证框架

这样解决：通过标准的子向父组件传值方式，即通过$emit发送需要添加验证规则的事件，在el-form父组件中捕获事件进行正则输入框验证规则的添加。

６.针对新技术，你是如何过渡到项目中？

答：
对于新技术，需要具体技术具体分析。如果该技术本身很重，一般都会放弃将其过渡到项目中。
若该技术很轻量，同时考虑到该技术解决了哪些问题以及适用场景，并且当前项目正好存在类似的问题,
则会将其应用到当前项目中。对于那种很重的技术，一般只会在开发新项目或老项目中开发新的功能模块时
考虑将其应用到当前项目中。

前端面试题之一