element后台管理系统代码_打造vuecli3+element后台管理系统（五）几个小技巧

当你的后台系统写好，给测试大大验收的时候。会发现他甩了一堆兼容性bug给你，在ie中打不开页面啦、在360浏览器火狐ie布局混乱啦、输入框怎么有难看的黄色背景啦、电话输入框怎么有丑陋的箭头啦、字体溢出了啦等等等等...

在开发时我们都习惯在google浏览器进行调试，总所周知，google浏览器的对css3、html5、es6等的支持是完全没有问题的，所以我们会忽略了其实在其他浏览器对这些新特性不够支持的问题，下面介绍我在开发后台系统中使用的一些插件和一些小技巧，来让你的后台系统尽可能多的向下向外兼容多版本浏览器~

一、用rem代替px

许多后台系统都要求要做成响应式的，虽然我们用的elementUI框架已经在响应式上面做了出色的处理，但是也只能解决一部分的问题。所以我们需要使用rem。

1.1 什么是rem

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。简单可理解为屏幕宽度的百分比。

但是！但是！问题来了，那就是我们其实用px开发习惯了，要改成rem一时半会缓不过来，加上还要换算是吧。所以用rem还挺烦的。接下来主角就登场了，安利大家几个插件，能够将你项目中的px转换成rem，还可以自定义换算基数等。

1.2 使用lib-flexible & px2rem自动转换px为rem，解决响应式问题

1.2-1 引入lib-flexible 和 px2rem

npm install --save lib-flexiblenpm install --save-dev px2rem-loader postcss-plugin-px2rem复制代码

postcss-plugin-px2rem 是为了在使用less或者sass的情况下也可以正常转换

1.2-2 删除或注释index.html中的 标签

使用lib-flexible插件，他会自动生成meta name="viewport"的标签，所以我们需要把原来有的删除掉。自动生成标签之后，lib-flexible会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size，如果你的设计稿宽度是750px，那font-size就会被设置为75px

  vuecli3-ele-admin-template We're sorry but vuecli3-ele-admin-template doesn't work properly without JavaScript enabled. Please enable it to continue.   复制代码

1.2-3 入口文件引入lib-flexible

在main.js全局引入lib-flexible

// 使用lib-flexible来解决移动端适配import 'lib-flexible'复制代码

1.2-4 新增配置

在vue.config.js新增px2rem的配置

const path = require('path')function resolve(dir) { return path.join(__dirname, dir)}module.exports = { publicPath: '/', outputDir: 'dist', // 输出文件目录 assetsDir: 'assets', // 静态资源文件夹 productionSourceMap: false, devServer: { port: 9566, // 端口号 open: true, proxy: null // 设置代理 }, // 新增内容 css: { loaderOptions: { sass: { // 如果用的是less就改成less javascriptEnabled: true }, postcss: { plugins: [ require('postcss-plugin-px2rem')({ rootValue: 54, // 换算基数，默认100，自行根据效果调整。 mediaQuery: false, // (布尔值)允许在媒体查询中转换px。 minPixelValue: 3 // 设置要替换的最小像素值默认0，这里表示大于3px会被转rem。 }) ] } } }, // 新增结束 chainWebpack: config => { // 新增内容 config.module .rule('css') .test(/.css$/) .oneOf('vue') .resourceQuery(/?vue/) .use('px2rem') .loader('px2rem-loader') .options({ remUnit: 54 }) // 新增结束 config.module .rule('svg') .exclude.add(resolve('src/icons')) .end() config.module .rule('icons') .test(/.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) }}复制代码

1.2-5 康康postcss-plugin-px2rem的配置项

官方文档给出的配置项有这么多：

{ rootValue: 100, unitPrecision: 5, propWhiteList: [], propBlackList: [], exclude:false, selectorBlackList: [], ignoreIdentifier: false, replace: true, mediaQuery: false, minPixelValue: 0}复制代码

我们目前只用到了三个 那么这些都是啥意思呢，一起来康康

• rootValue 转换基数，类型可以是Number也可以是Object，默认是100
• 如果你传的是一个Object，例如 { px: 50, rpx: 100 } ，那么就意味着，在换算的时候，如果遇上单位是px那换算基数是50，如果遇上rpx那么换算基数是100
• unitPrecision 单位精度，Number类型，简单的说就是转换之后的rem要保留几位小数，默认保留5位的哈
• propWhiteList 转换的白名单，Array类型，里面包含了可以被转换的css属性
• 默认是个空数组哦， 意思就是不用呗，就是说css里所有的属性，都可以进行转换
• 里面的属性值必须精确匹配，使用了白名单之后，意味着只有白名单里头的属性可以转换了。感觉这个白名单会比较少用到的说
• propWhiteList 转换的黑名单，和白名单相反嘛，黑名单里头的css属性是不会进行转换的
• exclude 排除的文件夹，是正则表达式。比如说写了/(node_module)/，就是说(node_module)中的样式文件不进行替换，这文件夹里能有啥，就是你引的插件嘛。排除这个文件夹的意思就是不对你引入的UI框架的样式进行单位转换。
• selectorBlackList 选择器黑名单，Array类型。和上面那个属性黑名单大同小异，不同的是这里忽略转换的依据是css选择器。
• 如果是['body']，数组元素是单纯的字符串，意思就是排除class为body的转换，即忽略.body下的所有属性的转换。
• 如果是[/^body$/]酱的，数组元素是一个正则表达式，他排除的就是body标签，即忽略body标签下的所有属性的转换。
• ignoreIdentifier 默认是false，也可以是String类型，当是某个css属性名的时候，意思就是忽略这个属性的转换。如果你想忽略的属性只有那么一个，而不是一连串的时候，就可以用它。当启用这个的时候，replace会自动变成true的哈
• replace 默认是true，Boolean类型，表示直接替换包含REM的规则，而不是添加回调函数
• mediaQuery Boolean类型，默认是false，表示是否允许在@media查询中进行转换
• minPixelValue Number类型，表示开始转换的最小值，默认是0，意思就是大于0px的长度都进行转换

---

细心的小伙伴发现我这里的rootValue转换基数设置的是54，为什么涅？你运行项目，然后F12，会发现根元素html的font-size是54px。为什么！为什么明明前面说的是宽度除以10啊，我特喵的pc端宽度是1080啊，不应该是font-size:108px么？？？想知道答案的小伙伴就要去看看伟大的lib-flexible的源码啦，lib-flexible里头有这么一段代码：

function refreshRem(){ var width = docEl.getBoundingClientRect().width; if (width / dpr > 540) { width = 540 * dpr; } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;}复制代码

pc端的dpr是1，width / dpr肯定是大于540的，所以lib-flexible会默认使用540px这个宽度，然后将屏幕宽度除以10作为rem值，所以1rem = 54px。所以我们将rootValue转换基数设为54刚刚好

---

康康添加了lib-flexible & px2rem之后，页面在移动端的显示效果如何：

好的，十分优秀。

二、解决低版本ie打不开页面的问题

当你写完后台系统之后，毛闷台了喔，在线上把代码一拉一部署，测试那边说了，你这个页面我浏览器打不开啊！你过去之后发现他用的ie不知道6还是7还是8测得你的网站。那么问题来了，为什么会打不开呢？

原因就是你的项目里头用了es6的promise，ie低版本对这个的支持不是特别好，这个问题很好解决，只需要引入两个插件就可以了。对本身代码没有其他影响。

2.1 引入es6-promise & 和babel-polyfill依赖包

npm install --save es6-promise babel-polyfill复制代码

2.2 在入口文件main.js引入

// 解决低版本浏览器不支持promise问题import 'babel-polyfill'import Es6Promise from 'es6-promise'Es6Promise.polyfill()复制代码

2.3 在vue.config.js新增配置

 // 。。。此处省略n个字符。。。 config.module .rule('icons') .test(/.svg$/) .include.add(resolve('src/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }) // 新增配置 config.entry.app = ['babel-polyfill', './src/main.js'] // 新增结束 }}复制代码

三、使用autoprefixer让css属性自动增加兼容前缀

很多时候，像flexBox或者transform这样样式，在不同浏览器下面有不同的写法，正常来说我们每次用到其中一个的时候都需要写这么长一大串：

复制代码

晕，我只是想要用一下flex布局啊。。

经过评论区小伙伴的提醒，这里有一个很棒的插件可以使用，他可以自动给你的项目增加兼容前缀，需要添加的浏览器兼容前缀由你自由配置。我们只需：

3.1安装autoprefixer依赖

cnpm install --save-dev autoprefixer复制代码

3.2在vue.config.js引入

// ...省略前面省略css: { loaderOptions: { sass: { // 如果用的是less就改成less javascriptEnabled: true }, postcss: { plugins: [ // 新增内容 require('autoprefixer')({}), // 新增结束 require('postcss-plugin-px2rem')({ rootValue: 54, // 换算基数，默认100，自行根据效果调整。 mediaQuery: false, // (布尔值)允许在媒体查询中转换px。 minPixelValue: 3 // 设置要替换的最小像素值默认0，这里表示大于3px会被转rem。 }) ] } } }, // ...省略后面省略复制代码

3.3 在package.json中指定browserslist关键字

在package.json中新增

"browserslist": [ "> 1%