最近两个月都在用Nuxt+ElementUI开发,被后端人员吐槽前端CI时间好久(其实也就一分多钟),而后端只要半分钟。正好要开新项目,同时在github上也了解到Nuxt2会使用Webpack4,加快构建速度,于是抓住机会升级Nuxt2,在新项目中使用。
升级
为比较升级前后的时间,我先在旧项目npm run build
一次,记录下时间,再卸载Nuxt,安装Nuxt2
|
|
然后再根据升级指引修改配置,下面记录了一些遇到过的问题
nuxt.config.js
- 删除
vendors
的配置 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
没有把相关依赖删除干净导致的, 最粗暴的办法就是, 整个项目依赖删除,重新安装
|
|
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后台管理系统。