vuecli中集成ts环境使用@vue/cli-plugin-typescript的坑

1,796 阅读1分钟

前言:公司最近把项目拆分成了很多个工程仓库,自己负责的仓库终于可以痛快的玩耍了,能想到的一点就是把ts加进来。

  项目用vue脚手架搭建的,所以参考了官方建议 image.png   按照官方的方法集成环境,起本地开发服务的时候,虽然有一些eslint的抱错,由于很强的职业素养就没有关注,因为界面是可以正常展示的。 问题是后面打算发布到开发服务器的时候,打包却报错了。tslint检测了我的代码,编译不通过。 image.png 后来经过老大指导搜索搜索check,format,test关键字看到cli-plugin-typescript的index.js文件下在运行时引用了fork-ts-checker-webpack-plugin。问题的就出现在这里,插件在跑production压缩运行时检测了代码。 image.png

image.png 既然问题找到了,就想法办解决吧,去github上搜了下,果然有人提出类似的问题,也有issue的解决方案如下:

How to disable ts-loader (tslint) checking in vue-cli 3 project?

在vue.config.js的chainWebpack下做如下更改即可

chainWebpack: (config) => {
    config.plugins.delete('fork-ts-checker')
    // ...
  }

在vue.config.js的chainWebpack下做如下更改即可 在运行production压缩命令ok通过,完美收官~