likes
comments
collection
share

nuxt + element-ui 踩坑记录!

作者站长头像
站长
· 阅读数 300

项目使用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处理。nuxt + element-ui 踩坑记录!

    还有一个问题需要注意,如果使用的url-cache版本过低,就算polyfill处理了IE11上依然会出现问题,比如说我们使用的版本是6.0.0版本。此处只需要升级一下lru-cache即可。同时对于老版本的方法也需要同步修改一下,lru-cache的maxAge改为了ttlreset方法也改为了clear

    element主题色修改兼容sass

  • 问题element主题色直接在初始化的scss文件中修改,然后在nuxt.config.js中直接使用node_modules中的element.css是无效的。如下图所示: nuxt + element-ui 踩坑记录! 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可查看具体内容。nuxt + element-ui 踩坑记录! 最后降级sass版本解决了这个问题,版本为~1.32.13~是为了固定版本号为1.32.x。

    结语

    至此,碰到的两个比较棘手的nuxt+element问题均已解决,后续碰到了还会继续在此更新。