vue支持typescript踩坑记录

框架

重点：
webpack的rule中添加ts-loader；
happyPackMode置为true；
appendTsxSuffixTo中添加vue；

注：
happyPack: 多进程模式构建，实现构建加速；

appendTsxSuffixTo：为表达式列表匹配到的文件添加.ts或.tsx后缀，让 tsc 对 vue 文件能够当成一个 module 进行处理，以解决 moudle not found 的问题（tsc 本身不认识 vue 结尾的文件）

代码

this.webpackUtils.addModuleRules([{
    name: 'module-ts',
    test: /\.ts$/,
    include: [PATH.resolve(projectDir, 'src')],
    use: [
        {
            name: 'ts-loader',
            loader: require.resolve('ts-loader'),
            options: {
                transpileOnly: true,
                happyPackMode: true,
                appendTsxSuffixTo: [/\.vue$/]
            },
        }
    ],
},

业务代码

index.ts(入口文件)

// import Vue from 'vue/dist/vue.esm.js'
import Vue from 'vue'
import Index from './index.vue';

var VM = new Vue({
    el: '#root',
    // template: '
',
    // components:{Index}
    render: h => h(Index)
});

index.vue

script标签中添加lang="ts"，否则不能识别ts。

参考

1、[在Vue中使用TypeScript]
(https://juejin.im/entry/5b19682be51d4506c1301e6f)

2、[webpack thread-loader with ts-loader]
(https://stackoverflow.com/questions/52570597/webpack-thread-loader-with-ts-loader)