Vue-cli 3.0 之后拆分单 vue 文件为 .ts 和 .vue 文件

vue-cli 3.0 之后，VUE 的配置有很大的改变，

最简单的，把 HelloWorld.vue 文件中的 ts 代码拆分出去为  HelloWorld.ts 

将 HelloWorkd.vue 中改为 <script lang="ts" src="./HelloWorld.ts"></script> 

之后，运行将出错。

https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/111  

根据这儿的说法， 需要修改 vue 的配置，

在 vue-cli 3.0之后， vue的配置单独卸载 vue.config.js 中，

module. exports = {

// ...

chainWebpack : config => {

// https://github.com/vuejs/vue-cli/issues/1104

// typescript building error when import .vue file with separate .ts file, 即在 ts 文件中无法引入 .vue 组件;

// 下面的代码解决上面这个 bug, 解决方法来源: https://github.com/Realytics/fork-ts-checker-webpack-plugin/issues/111

config. plugins. delete( 'fork-ts-checker');

config. module

. rule( 'ts')

. use( 'ts-loader')

. tap( options => {

return { ... options,

'transpileOnly' : false

}

});

}

}

运行ok..