nuxt|nuxt + element-ui 踩坑记录！
项目使用nuxt重构，碰到了几个坑，记录一下（我们是用的build打包而非generate静态页面打包）。
兼容IE11
- 问题
首先，IE11直接跑本地项目会报错polyfill-eventsource added missing EventSource to window，必须得先打包再启动打包好的文件，步骤如下：
npm run build // 打包生成.nuxt文件夹 npm run start // 直接启动打包好的项目，本地测试无需拉出内容到服务器进行启动
跑项目依然报错，查看报错发现是项目中用到的中间件有问题。serverMiddleware中配置了pageCache文件，其中主要是lru-cache这个插件，node_modules中查看插件源代码，发现其中使用了es6代码，而编译的时候，core-js没有对node_modules文件内容进行polyfill处理。
- 解决
找到问题的原因后，就好办了。如下图，在nuxt.config.js文件中的build--transpile内增加lru-cache插件，此块主要是对node_modules中用到的插件进行polyfill处理。
文章图片
还有一个问题需要注意，如果使用的url-cache版本过低，就算polyfill处理了IE11上依然会出现问题，比如说我们使用的版本是6.0.0版本。此处只需要升级一下lru-cache即可。同时对于老版本的方法也需要同步修改一下，lru-cache的
element主题色修改兼容sassmaxAge改为了ttl，reset方法也改为了clear。
- 问题
element主题色直接在初始化的scss文件中修改，然后在nuxt.config.js中直接使用node_modules中的element.css是无效的。如下图所示：
文章图片
文章图片
由于主题色加载顺序的问题，直接这样修改是不会生效的。 - 【nuxt|nuxt + element-ui 踩坑记录！】解决
按照官方element主题色修改主题色，如下：
// 改变主题颜色 $--color-primary:$PRO_COLOR; /* 改变 icon 字体路径变量，必需 */ $--font-path: '~element-ui/lib/theme-chalk/fonts'; @import "~element-ui/packages/theme-chalk/src/index";
重新启动后会报一堆警告错误，且页面样式会错乱，查找资料后发现是sass版本问题，sass在1.33.0版本以上会将/符号当作分隔符而不是除号运算，这会与element样式产生冲突，sass官方changes可查看具体内容。
文章图片
最后降级sass版本解决了这个问题，版本为~1.32.13，~是为了固定版本号为1.32.x。
结语
至此，碰到的两个比较棘手的nuxt+element问题均已解决，后续碰到了还会继续在此更新。
推荐阅读
- 新能源|悦达投资频“踩坑”：拆迁补偿款泡汤，30万锭项目缩减为10万锭，股价缩水近6成
- 学习记录|踩坑！穿山甲广告Android SDK接入
- vue-cli对element-ui组件进行二次封装的实战记录
- 踩坑-Tomcat(servlet)在启动(加载)是执行两次
- # Apache DevLake 兼容 PostgreSQL 踩坑小结
- Nuxt默认模板、默认布局和自定义错误页面的实现
- golang的defer踩坑汇总
- 将BigDecimal转成字符串为科学计数法的踩坑记录
- Linux学习及相关操作|Linux配置静态ip地址（CentOS7）（不踩坑）
- nuxtjs|闲云旅游项目开发-（第一篇（使用Element-ui实现主页轮播图））