项目介绍

1.多环境变量配置，axios请求响应拦截，api封装统一管理

面试官你好，每时每刻后台管理系统这个项目是我自己独立开发完成的，下面我给您介绍一下，我是从0开始到发布上线的流程。首先，开发这个项目我用的是最新的vue脚手架3的版本。项目创建文成后，首先我会配置多个环境变量，分别是.env.development本地开发环境配置，.env.staging测试环境配置，.env.production正式环境配置，方便后期测试用，上线阶段快速切换后台接口。之后安装axios，对axios进行封装，添加请求拦截和响应拦截，我一般在请求拦截器中，给请求头添加token字段。当然这个token也存放在vuex中，还有loading动画的开启，响应拦截器中，我会关闭请求时开启的loading动画，根据后端返回的状态码（code）值，验证token是否有效或者过期（一般401表示token无效，402表示token过期）。接着我会用封装好的axios进行api接口的封装，这里用到了async、await封装请求接口函数，这样将异步操作同步化操作，代码会更加友好，避免回调地狱的出现。然后安装配置项目用到的element-ui框加，需要按需导入：安装babel-plugin-component插件，在babel.config.js加入按需引入的配置最后在mian.js中按需引入element-ui组件名。最后一步需要导入全局样式表。

2.vuex的使用

我的每时每刻后台管理系统项目用vuex对数据进行共享。就像上方所说可以将token存储在vuex中，之前遇到过刷新页面vuex数据丢失的问题，我查询资料，可以用数据持久化解决，原理就是把vuex中的数据同步到sessStorage或localStorage中，用一个插件就可以解决vuex-persistedstate

3.使用组件化拆分，开发项目

整个项目部分组件我会拆分出去，开发初期，我会创建一个feature目录用来存放功能性的组件比如分页器组件，搜索组件。然后使用组件通信的方式进行传值

4.优化

最后就是项目优化，优化分为代码优化和webpack打包优化。
代码优化：
1.使用keep-alive缓存不活动的组件，分为两种一种是在动态组件中的应用另一种是在vue-router中的应用
2.使用路由懒加载：
Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。
3.图片懒加载
对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：
4.使用节流防抖函数(性能优化)

webpack打包优化

目的：
提高打包速度
减小项目体积，提高首屏加载速度
提高用户体验
1.去除生产环境sourceMap
2.去除console.log打印以及注释
3.使用CDN加速优化
4.对资源文件进行压缩
5.图片压缩
6.只打包改变的文件
7.公共代码抽离
8.配置打包分析