升级到Nuxt2

最近两个月都在用Nuxt+ElementUI开发，被后端人员吐槽前端CI时间好久(其实也就一分多钟)，而后端只要半分钟。正好要开新项目，同时在github上也了解到Nuxt2会使用Webpack4，加快构建速度，于是抓住机会升级Nuxt2，在新项目中使用。

升级

为比较升级前后的时间，我先在旧项目npm run build一次，记录下时间，再卸载Nuxt，安装Nuxt2

1
2
npm uninstall nuxt
npm install nuxt-edge

然后再根据升级指引修改配置，下面记录了一些遇到过的问题

nuxt.config.js

  1. 删除vendors的配置
  2. context.isServer/context.isClient分别修改为process.client/process.server, 不然会报这个错Module build failed: TypeError: Cannot read property ‘eslint’ of undefined

Vue packages version mismatch

这是由于vue版本跟vue-server-renderer的版本不一致导致的。可能是npm uninstall nuxt没有把相关依赖删除干净导致的， 最粗暴的办法就是, 整个项目依赖删除，重新安装

1
2
rm -fr node_modules
npm i

stylus报错

需要指定stylus-loader版本至少为^3.0.2，详情可以看论坛讨论

1
npm i stylus stylus-loader@3.0.2

样式错乱

解决上面的问题后，项目可以跑起来了，但发现样式不对。分析后发现，原来是样式加载顺序改变了。Nuxt的时候，是先加载UI框架的样式，再加载自定义样式; Nuxt2是反过来。由于二者的选择器权重是一样的，则哪个顺序更后样式规则就用哪个，因而出现覆盖样式不生效的问题。解决方法很简单，因为Nuxt项目大部分DOM元素都在id为__nuxt的元素下，因此在自己定义样式前，加个父选择器#__nuxt即可

结论

在2015年初8G内存i5处理器的MBP上，编译时间前后对比：

webpack 3.11： 39804ms + 8740ms = 48.544s

webpack 4.8.1： 23169ms + 5533ms = 28.702s

时间缩短了40%左右

最后，广告一波自己封装nuxt-element脚手架，已集成鉴权登录，用户信息获取，资源菜单获取等功能，里面有个DataTable组件，可快速开发CRUD后台管理系统。

参考

nuxt2升级指引

Fork me on GitHub