关于前端:nuxt-elementui-踩坑记录

我的项目应用 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 的 maxAge 改为了 ttl，reset 办法也改为了clear。

  element 主题色批改兼容 sass

• 问题
  element 主题色间接在初始化的 scss 文件中批改，而后在 nuxt.config.js 中间接应用 node_modules 中的 element.css 是有效的。如下图所示：
  
  
  因为主题色加载程序的问题，间接这样批改是不会失效的。

• 解决
  依照官网 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 问题均已解决，后续碰到了还会持续在此更新。