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

泡椒猪脚饭

已于 2023-12-19 18:37:49 修改

阅读量2.6k

点赞数 10

分类专栏： # Vue3 文章标签： vue.js 前端 javascript

于 2023-12-19 18:37:42 首次发布

本文链接：https://blog.youkuaiyun.com/m0_53912016/article/details/135091527

版权

Vue3 专栏收录该内容

50 篇文章

订阅专栏

本文介绍了如何在Vue项目中处理因lang=ts引入的编译问题，步骤包括安装typescript和ts-loader，修改vue.config.js和tsconfig.json配置，以及创建vue-shim.d.ts来让Vue识别TypeScript文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

报错信息

在这里插入图片描述

报错原因 加上了lang=ts

解决

下载typescript和loader

npm install typescript ts-loader --save-dev

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

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

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

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

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

vue-shim.d.ts

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