vue3 使用＜script lang=“ts“ setup＞加上lang=“ts“后编译错误_script lang="ts" setup

报错信息

报错原因 加上了lang=ts
1

解决

下载typescript和loader

npm install typescript ts-loader --save-dev

1
2

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

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

1
2
3
4
5
6
7
8
9
10
11

在src根目录下新建vue-shim.d.ts 这个文件可以让vue识别ts文件（不加会报错）

vue-shim.d.ts

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}  


1
2
3
4
5
6