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..