Quasar项目中如何让TypeScript转换器处理Vue单文件组件？

兄弟，我太懂你这个头疼的问题了——你用的@rollup/plugin-typescript本身只能直接识别.ts后缀的文件，.vue单文件组件里的<script setup lang='ts'>代码它根本“看不见”，因为这些代码被包裹在Vue的SFC（单文件组件）结构里，得先经过Vue专属的编译插件，把script部分提取出来转成普通的TS代码，TypeScript插件才能接着处理。

我给你分两种情况说具体的解决办法，取决于你的Quasar项目用的是Rollup还是Vite构建：

情况一：你的项目用Rollup构建 #

1. 先装必要的依赖
   你需要安装rollup-plugin-vue（处理Vue SFC）和@vue/compiler-sfc（编译SFC的核心包）：

   npm install rollup-plugin-vue @vue/compiler-sfc --save-dev
   

2. 修改quasar.config.ts的Rollup插件配置
   关键是让Vue插件先执行，把SFC里的TS代码提取出来，再交给TypeScript插件处理。配置大概是这样：

   import { configure } from 'quasar/wrappers';
   import vue from 'rollup-plugin-vue';
   import typescript from '@rollup/plugin-typescript';
   
   export default configure(function (/* ctx */) {
     return {
       // ...其他项目配置（比如css、devServer这些）
       build: {
         // ...其他build配置
         rollupPlugins: {
           before: [
             // 第一步：用vue插件处理所有.vue文件，提取script里的TS代码
             vue({
               include: /\.vue$/,
               script: {
                 lang: 'ts',
                 setup: true // 必须开启，支持<script setup>语法
               }
             }),
             // 第二步：让typescript插件处理转译后的TS代码
             typescript({
               tsconfig: './tsconfig.json', // 指定你的TS配置文件路径
               include: ['**/*.ts', '**/*.vue'] // 确保包含.vue文件
             })
           ],
           // ...其他rollup插件（比如resolve、commonjs这些）
         }
       }
     }
   });
   

情况二：你的项目用Vite构建（现在Quasar默认多是Vite） #

Vite本身集成了对Vue SFC和TypeScript的支持，不用手动加@rollup/plugin-typescript，只要确保@vitejs/plugin-vue配置正确就行：

1. 确保你已经安装了@vitejs/plugin-vue（Quasar初始化项目时一般会自动装）
2. 修改quasar.config.ts的Vite插件配置：

   import { configure } from 'quasar/wrappers';
   import vue from '@vitejs/plugin-vue';
   
   export default configure(function (/* ctx */) {
     return {
       // ...其他项目配置
       build: {
         // ...其他build配置
       },
       vitePlugins: [
         vue({
           script: {
             setup: true, // 支持<script setup>
             tsx: true // 如果用到TSX的话可以开，不用就忽略
           }
         })
       ]
     }
   });
   

最后别忘了检查TS配置 #

打开你的tsconfig.json，确保include数组里包含.vue文件，不然TS编译器会忽略它们：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.vue",
    "src/**/*.d.ts"
  ],
  // ...其他TS配置选项
}

这样操作之后，你的Vue单文件组件里的TypeScript代码就能被正确处理，插件也能拿到对应的输入了。

备注：内容来源于stack exchange，提问作者user3414982