项目是使用nuxt重构的，遇到了几个坑，记录一下（我们使用构建打包，而不是生成静态页面打包）。兼容IE11首先，如果IE11直接运行本地项目，会报错polyfill-eventsourceaddedmissingEventSourcetowindow。打包后的文件必须先打包后启动。步骤如下：npmrunbuild//打包生成一个.nuxt文件夹npmrunstart//直接启动打包好的项目，本地测试不需要拉取内容到服务器启动运行项目，依然报错，查看报错，发现是项目中使用的中间件有问题。pageCache文件在serverMiddleware中配置，主要是lru-cache插件。查看node_modules中的插件源码，发现里面使用了es6代码。编译时，core-js没有polyfillnode_modules文件的内容。一旦找到问题的原因，就很容易处理了。如下图，在nuxt.config.js文件中的build--transpile中添加lru-cache插件。这块主要是polyfillnode_modules中用到的插件。还有一个问题需要注意。如果使用的url-cache版本太低，即使polyfill处理了，在IE11上还是会出现问题。比如我们使用的版本是6.0.0版本。这里只需要升级lru-cache即可。同时，老版本的方法也需要同步修改。lru-cache的maxAge改为ttl，reset方法也改为clear。元素主题颜色修改兼容sass问题在初始化的scss文件中直接修改元素主题颜色，然后在nuxt.config.js中直接使用node_modules中的element.css是无效的。如下图所示：由于主题色加载顺序的问题，这样的修改不会直接生效。解决方法是根据官方元素主题色修改主题色，如下：//更改主题色$--color-primary:$PRO_COLOR;/*更改图标字体路径变量，必填*/$--font-path:'~element-ui/lib/theme-chalk/fonts';@import"~element-ui/packages/theme-chalk/src/index";重启后会报一堆warning错误，页面样式乱。查找资料后发现是Sass版本问题，Sass1.33.0及以上版本会使用/符号作为分隔符而不是分隔符，会与元素样式冲突，请查看官方修改萨斯的细节。最后降级sass版本解决了这个问题。版本是~1.32.13，~是为了固定版本号为1.32.x。结语至此，遇到的两个棘手的nuxt+element问题都已经解决了，以后遇到的话会在这里继续更新。
