vue3项目使用<script lang="ts" setup></script>编译错误解决办法

vue3项目使用<script lang="ts" setup></script>编译报错，如下图：

 解决办法：

1.下载typescript和loader

npm install typescript ts-loader --save-dev

2.  配置vue.config.js  添加下面的代码。

configureWebpack: {    
      resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },    
      module: {        
        rules: [    
          {    
            test: /\.tsx?$/,    
            loader: 'ts-loader',    
            exclude: /node_modules/,    
            options: {
              appendTsSuffixTo: [/\.vue$/],    
            }    
          }        
        ]    
      }    
    }

3.  新建tsconfig.json放在项目根目录。

{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "strict": true,
      "strictNullChecks": true,
      "esModuleInterop": true,
      "experimentalDecorators": true
    }
}

4.重启项目即可。