Nuxt从1.4.2升级至2.1.0的一些重要变化

Nuxt从1.4.2升级至2.1.0的一些重要变化

Nuxt最近刚发布了2.0版本,目前最新版本为2.1.0。我博客项目应用的是1.4.2版本,经过一段时间对源码的研究,逐步实现了1.4.2到2.1.0的平稳迁移,以下是我的一些总结。

重要变化

  • webpack 版本升级到 4.x,构建配置变更
  • 一些项目依赖包的版本升级,可能需要手动升级
  • ESlint版本升级至7.x
  • postcss-cssnext替换为postcss-preset-env,通过build.postcss.preset进行配置
  • 支持nuxt.config.jsserverMiddlewaremodule部分的 ES6 模块规范(esm模块提供)
  • clientserver的构建输出分离,静态服务指向dist/client,提高安全性
  • nuxt 命令中设置process.env.NODE_ENV默认值,nuxt build,nuxt startnuxt generate默认值为production,nuxt dev默认值为development
  • router 路由定义扩展(app/router.js
  • 页面组件options validate参数扩展变更为context
  • 页面组件options增加loading,值为false时加载进度条变更为手动控制(通过this.$loading
  • 页面组件options增加watchQuery,值为true或使用数组指定具体查询字符串时,相关查询字符串发生变化则重新执行组件方法(asyncData, fetch, validate, layout 等)

配置

build

变更 webpack4 进行构建,变动较大

  • 去除vendor
  • 增加postcss.preset,对postcss-preset-env进行配置
  • layouts的加载模式由异步加载变更为通过splitChunks.layouts进行配置,值为true则对layouts采用异步加载,否则同步加载
  • pages的加载模式由异步加载变更为通过splitChunks.pages进行配置,值为true则对pages采用异步加载,否则同步加载
  • 增加quite,静默模式
  • dev模式下,extractCSS强制为 false

server

  • 增加 https 支持
  • host、port 配置(nuxt 2.1.0 以上可用)

vue

直接配置 Vue

vue: { config: { silent: process.env.NODE_ENV === 'production', performance: process.env.NODE_ENV !== 'production' } }

render

  • dist: 对指向/.nuxt/dist/client的静态服务中间件serve-static进行配置;
  • gzip: 名称变更为 compressor,值为函数时作为自定义压缩中间件,值为对象时作为compression中间件的配置参数;
  • bundleRenderer: 配置vue-server-renderer Renderer选项,默认设置shouldPrefetch返回false;
  • csp:弃用enabled项,默认false,不启用 csp(响应头:Content-Security-Policy);
render: { bundleRenderer: { // disable prefetch shouldPrefetch: () => false }, csp: false, compressor: { }, dist: { // Don't serve index.html template index: false, // 1 year in production maxAge: '1y' } }

watch

手动配置监听文件,文件变化时重新构建(spa模式)或重启服务(ssr模式)

messages

增加loading,显示加载文案(spa模式)

loading

  • 增加throttle:等待多久后开始显示进度条,默认200ms

loadingIndicator

{ name: 'default', color: (options.loading && options.loading.color) || '#D3D3D3', color2: '#F5F5F5', background: (options.manifest && options.manifest.theme_color) || 'white', dev: options.dev, loading: options.messages.loading }

hooks

  • render:context变更为render:routeContext,传入一个参数:context.nuxt,用于在输出到客户端的全局变量window.__NUXT__确定之前操作该值。
  • nuxt中间件增加render:routeDone钩子,当重定向、304 缓存等请求结束时调用
  • 增加watch:fileChanged钩子,传入参数builder实例及变更文件。该钩子在nuxt dev命令中被用来控制文件变更时重新构建及重启服务。

connect 中间件

  • compressor压缩中间件可配置:配置为函数时即使用自定义压缩中间件,为对象时即compression中间件的配置参数
  • 删除dist服务端资源过滤中间件(dist资源进行了clientserver区分,静态服务指向dist/client
  • 指向dist/client的静态服务serve-static中间件可通过render.dist进行配置

日志

使用consola替换debug记录 nuxt 活动日志;

组件

no-ssr升级为vue-no-ssr

最后编辑于 2018-10-08 11:32