Nuxt升级2.0.0时出现的问题(小结)

喜大普奔,Nuxt终于正式发布2.0了,最近趁热把博客从1.4升级到了2.0,并且用Typescript重构了下,可以点Jooger.me看下,在升级Nuxt过程中出现了一个小问题

关于release 2.0的公告可以查看官网的Release Notes以及官方的Demo,升级过程十分简单,基本不需要什么迁移成本,所有npm命令都跟以前一样,只需要把一些关联包升级一下即可

今天出现的问题是这样的,随着nuxt升级,webpack和vue-loader也分别升级到了4和15,升级过后,报了如下问题

Invalid source file: ***.vue. Ensure that the files supplied to lint have a .ts, .tsx, .d.ts, .js or .jsx extension.

一般看到这个extension的问题都下意识地想到webpack的resolve.extensions没有配置.ts或者.tsx扩展,但其实不然,仔细看前半句会发现是在处理.vue文件的时候报的这个错,所以很容易就想到应该是vue-loader的问题了,在vue-loader的这个issue讨论了这个问题

耐心查看完,会发现其实是tslint-loader的typeCheck在作怪,如果开启这个选项,那就会导致上述错误,理由是这个选项导致在构建的时候tslint会lint整个vue文件,而不单单是文件里的ts部分,所以直接解决办法是把tslint-loader的typeCheck去掉

至于为啥会lint全文件,这个后续再验证下,应该是vue-loader15的对vue文件进行拆分时出现问题

而且关掉typeCheck会出现什么问题,目前还未发现

到这里可以其实再进一步思考一下,为啥vue-cli3的tslint没有报错了,看了下vue-cli的ts插件cli-plugin-typescript里的代码

addLoader({
 loader: 'ts-loader',
 options: {
  transpileOnly: true,
  appendTsSuffixTo: ['\\.vue$'],
  // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
  happyPackMode: useThreads
 }
})
// make sure to append TSX suffix
tsxRule.use('ts-loader').loader('ts-loader').tap(options => {
 options = Object.assign({}, options)
 delete options.appendTsSuffixTo
 options.appendTsxSuffixTo = ['\\.vue$']
 return options
})

config
 .plugin('fork-ts-checker')
  .use(require('fork-ts-checker-webpack-plugin'), [{
   vue: true,
   tslint: options.lintOnSave !== false && fs.existsSync(api.resolve('tslint.json')),
   formatter: 'codeframe',
   // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
   checkSyntacticErrors: useThreads
  }])

可以看到它是用了fork-ts-checker-webpack-plugin这个webpack插件,具体什么用途可以看看它的README

所以modules/typescript.js最终配置如下

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = function () {
 // Add .ts extension for store, middleware and more
 this.nuxt.options.extensions.push("ts")
 // Extend build
 this.extendBuild(config => {
  const tsLoader = {
   loader: 'ts-loader',
   options: {
    transpileOnly: true,
    appendTsSuffixTo: [/\.vue$/]
   }
  }
  // Add TypeScript loader
  config.module.rules.push(
   Object.assign({
     test: /((client|server)\.js)|(\.tsx?)$/
    },
    tsLoader
   )
  )
  // Add .ts extension in webpack resolve
  if (config.resolve.extensions.indexOf(".ts") === -1) {
   config.resolve.extensions.push(".ts");
  }

  config.plugins.push(new ForkTsCheckerWebpackPlugin({
   vue: true,
   tslint: true,
   formatter: 'codeframe',
   // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
   checkSyntacticErrors: process.env.NODE_ENV === 'production'
  }))
 })
}

更新

今天在用的时候,发现改了代码save的时候,nuxt会重新hot reload,这时会报如下错误

Error: fork-ts-checker-webpack-plugin hooks are already in use

很明显,是reload过程中,加载了两次,所以modules/typescript.js代码更新如下

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

// 判断时候load过这个plugin
let hasForkTsCheckerPlugin = false

module.exports = function () {
 // Add .ts extension for store, middleware and more
 this.nuxt.options.extensions.push("ts")
 // Extend build
 this.extendBuild(config => {
  const tsLoader = {
   loader: 'ts-loader',
   options: {
    transpileOnly: true,
    appendTsSuffixTo: [/\.vue$/]
   }
  }
  // Add TypeScript loader
  config.module.rules.push(
   Object.assign({
     test: /((client|server)\.js)|(\.tsx?)$/
    },
    tsLoader
   )
  )
  // Add .ts extension in webpack resolve
  if (config.resolve.extensions.indexOf(".ts") === -1) {
   config.resolve.extensions.push(".ts");
  }

  if (!hasForkTsCheckerPlugin) {
   // 第一次load
   hasForkTsCheckerPlugin = true
   config.plugins.push(new ForkTsCheckerWebpackPlugin({
    vue: true,
    tslint: true,
    formatter: 'codeframe',
    // https://github.com/TypeStrong/ts-loader#happypackmode-boolean-defaultfalse
    checkSyntacticErrors: process.env.NODE_ENV === 'production'
   }))
  }
 })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • nuxt框架中路由鉴权之Koa和Session的用法

    引子 博客的后台管理页面需要有登录系统,所以考虑做一下路由鉴权,实现方式也是 Nuxt 官网给出栗子来改写,顺便也将前后端路由给统一了. 路由拦截 前端方面主要通过利用 Nuxt 的中间件来做路由拦截,这里也是需要 Vuex 状态树来做. middleware middleware/auth.js export default function ({ store, redirect }) { if (!store.state.user) { return redirect('/login') }

  • 详解Nuxt.js Vue服务端渲染摸索

    本文采用nuxt进行服务端渲染https://zh.nuxtjs.org/ Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的. 我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的页面meta信息和其他SEO相关信息,使网站无法在搜索引擎中被用户搜索到.(2)用

  • 详解基于 Nuxt 的 Vue.js 服务端渲染实践

    Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染 服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用

  • Nuxt.js实现校验访问浏览器类型的中间件

    前言 Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可. 这个需求非常常见,分享出去的页面的有时候在手机访问,有时候别人是PC打开的; 若是不是共享同一个页面的情况,就需要拦截跳转了; 当然你要共享同一个页面也可以(放大化到PC也需要添加某些CSS,也需判断设备) 思路 本质上还是校验 UA , 只是这次是从 req 拿到,而不是从客户端获取再做处理 客户端的处理的姿势 window.navigator.userAgent 服务端的处理姿势 其实基本和上面的思路一

  • Nuxt.js踩坑总结分享

    构建问题 1. 如何在 head 里面引入js文件? 背景: 在<head>标签中,以inline的形式引入flexible.js文件.本项目主要为移动端项目,引入flexible.js 实现移动端适配问题. Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置: // nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text

  • Nuxt.js实战详解

    一.为什么选择Nuxt.js 多数是基于webpack构建的项目,编译出来的html文件,资源文件都被打包到js中,以下图404页面代码为例.从代码中可以看出,这样的页面是不利于 搜索引擎优化(SEO, Search Engine Optimization) ,并且 内容到达时间(time-to-content) (或称之为首屏渲染时长)也有很大的优化空间.为了解决以上问题,引入了 Nuxt.js 框架. vue官网对于Nuxt.js也是很推荐的,除此之外,Nuxt.js的开发者积极活跃,版本迭

  • nuxt.js 缓存实践

    nuxt 是基于 vue 的 ssr 解决方案,可以是使用vue语法完成前后端的同构. 然而在与传统纯字符串拼接的 ssr 方案相比,性能就没那么好了, nuxt 需要在服务端生成虚拟 dom ,然后再序列化出HTML字符串,我们常说 nodejs 的高性能指的是异步IO操作频繁的场景而非CPU操作密集的场景,毕竟 nodejs 是运行在单线程下的,在涉及到高并发的场景下,性能就会有所下降,可以考虑采用合理的缓存策略 nuxt 的缓存可以分为 组件级别缓存 , API级别缓存 以及 页面级别缓存

  • Nuxt升级2.0.0时出现的问题(小结)

    喜大普奔,Nuxt终于正式发布2.0了,最近趁热把博客从1.4升级到了2.0,并且用Typescript重构了下,可以点Jooger.me看下,在升级Nuxt过程中出现了一个小问题 关于release 2.0的公告可以查看官网的Release Notes以及官方的Demo,升级过程十分简单,基本不需要什么迁移成本,所有npm命令都跟以前一样,只需要把一些关联包升级一下即可 今天出现的问题是这样的,随着nuxt升级,webpack和vue-loader也分别升级到了4和15,升级过后,报了如下问题

  • AndroidStudio升级到3.0的新特性和注意事项小结

     概述 谷歌发布Android Studio3.0正式版已经有一段时间了,最近抽空升级了一下,也踩了一些坑.特地记录一下.作为开发者第一时间体验谷歌带来的新特性是很有必要的.当然为了项目稳定性,也要根据实际情况决定是否升级相关插件 升级 从已有的IDE升级,无非就是File->Settings->Appearance&Behavior->Updates,这里可以选择升级渠道:Canary(金丝雀)Dev(开发版)Beta(Beta版)Stable(稳定版),以及是否使用安全链接.

  • Android Studio 升级到3.0 提示 java.lang.NoClassDefFoundError的解决方法

    解决方法 首先把方法写出来,起因和经过和原理写在后面,时间仓促的直接看解决方法吧. 一般出现这个错都是使用的provided导致的 例如,我的旧配置如下: Project build.gradle文件: buildscript { dependencies { classpath 'com.android.tools.build:gradle:3.0.1' // need delete in gradle3.x version classpath 'com.neenbedankt.gradle.

  • gradle tool升级到3.0注意事项小结

    Gradle版本升级 其实当AS升级到3.0之后,Gradle Plugin和Gradle不升级也是可以继续使用的,但很多新的特性如:Java8支持.新的依赖匹配机制.AAPT2等新功能都无法正常使用. Gradle Plugin升级到3.0.0及以上,修改project/build.gradle文件: 修改global.gradle(自定义lib管理的gradle) tools = [ gradleTools : 'com.android.tools.build:gradle:3.0.1' ]

  • Android Studio升级到3.0后遇到的坑

    这几天谷歌推出了as3.0的正式版,相信大家都进行更新了,然后对3.0的新特性也有过一些了解,最后磨刀霍霍开始宰杀,然鹅却一不小心就开始了排坑之路. 第一坑.必须升级gradle到4.0以上 相信这个大坑,一般使用as的人都会解决了,所以就不多说 第二坑.buildToolsVersion升级到26.0.0 其实这个不算坑,一般buildToolsVersion都会升级到最新的版本,直接更新就是了 第三坑.Error:Resource shrinker cannot be used for li

  • CentOS 6.0 启动时出现fstab错误时的修复方法

    CentOS启动时,出现了fstab 中 /dev/loop1 设备的读取失败,结果,呵呵,系统进入了recovery 模式,输入root密码之后,想修改fstab,结果发现不行,后来找了半天, 发现可以使用: #mount -o remount,rw / 之后,fstab就可以修改了. 以上这篇CentOS 6.0 启动时出现fstab错误时的修复方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 谈谈Android6.0运行时的权限处理

    运行时权限介绍 Android 6.0在我们原有的AndroidManifest.xml声明权限的基础上, 又新增了运行时权限动态检测,以下权限都需要在运行时判断: 1.身体传感器 2.日历    3.摄像头 4.通讯录 5.地理位置 6.麦克风 7.电话 8.短信 9.存储空间 在 Android 6.0 中,app 如果想要获得某些权限,会在应用中弹出一个对话框,让用户确认是否授予该权限. 具体的截图如下: 这要做的好处就是运行一个 app 时可以拒绝其中的某些权限,防止 app 触及到你的

  • 详解Android权限管理之Android 6.0运行时权限及解决办法

    前言: 今天还是围绕着最近面试的一个热门话题Android 6.0权限适配来总结学习,其实Android 6.0权限适配我们公司是在今年5月份才开始做,算是比较晚的吧,不过现在Android 6.0以上设备越来越多了,所以Android 6.0 权限适配是必不可少的工作,这里主要介绍一下我们公司是如何做Android 6.0权限适配的. Android 6.0以下非运行时权限: 根据上面博客我们很清楚的知道,Android的权限其实就是为了程序之间更加的安全的访问,所以权限有等级之分,比如:No

  • Android Studio 升级到3.0后输入法中文状态下无法选词的终极解决方案

    AndroidStudio终于出3.0正式版了,内置了kotlin(虽然我安了插件一直能用).一直忍着没敢下rc版的好奇猫,总算装了正式版.当然,伴随每次大版本更新,总有一些恼人的后遗症,其中以gradle问题最多.AS3.0要求gradle版本在3.5以上,配置文件内将标准版本指定为gradle-4.1-milestone-1. 之前用的是AS2.3,在稳定版3.0发布之后由于好奇,就更新到了3.0.但是,除了Android Profiler分析器+自我感觉native编译速度加快以外,其他的

  • Docker版的MySQL5.7升级到MySQL8.0.13,数据迁移

    1.备份旧的MySQL5.7的数据 记得首先要备份旧的数据,防止升级失败导致数据丢失.备份的方式有两种,一种是在宿主机直接执行导出命令,另外一种是先进入Docker环境下进行操作.主要的导出命令如下: #方式一,直接在宿主机器进行数据备份 # 0df568 是docker的id ;-uroot -p123456 是用户名和密码;dbA dbB是要备份的数据,--databases 后面可以接多个数据库名,导出的sql到/root/all-databases3306.sql docker exec

随机推荐