Quasar 2.7.5中Vue3类型式Props声明失效问题求助

1. 检查Quasar的Vite/Webpack插件配置 #

如果是Vite项目，在quasar.config.js的build字段下，确认@vitejs/plugin-vue的配置是否开启了props解构支持——这是类型式props解析的关键：

// quasar.config.js
module.exports = configure(function (ctx) {
  return {
    build: {
      vitePlugins: [
        [
          '@vitejs/plugin-vue',
          {
            script: {
              propsDestructure: true // 必须开启此项，否则类型式props无法被正确解析
            }
          }
        ]
      ]
    }
  }
})

若你用的是Webpack项目，需确保vue-loader版本兼容Vue 3.2.37，且配置中未禁用script setup的类型解析逻辑。

2. 验证tsconfig.json的编译器配置 #

确保tsconfig.json的compilerOptions满足Vue类型声明的要求：

• 开启strict: true（至少启用noImplicitAny和strictNullChecks，类型式props依赖严格类型检查）
• types数组包含vue和对应Quasar的类型包（如@quasar/app-vite）
• moduleResolution设为bundler（Vite推荐）或node

示例配置片段：

{
  "compilerOptions": {
    "strict": true,
    "types": ["vue", "@quasar/app-vite"],
    "moduleResolution": "bundler"
  }
}

3. 核对依赖版本兼容性 #

你的Quasar 2.7.5需搭配对应版本的配套依赖，避免版本不匹配导致的解析异常：

• 运行npm list @quasar/app-vite vue vue-tsc查看版本，确保@quasar/app-vite与Quasar核心版本一致，vue-tsc与Vue 3.2.37兼容
• 若存在版本冲突，执行npm update @quasar/app-vite vue-tsc更新到兼容版本

4. 排查代码压缩/Tree Shaking的影响 #

过度的代码压缩或Tree Shaking可能误删类型式props的解析代码，可临时调整quasar.config.js的build配置测试：

// quasar.config.js
build: {
  minify: false, // 临时关闭压缩
  treeShaking: 'recommended' // 采用Quasar推荐的Tree Shaking策略
}

若测试后props能正常取值，再逐步调整压缩配置，排除压缩插件的干扰。

5. 确认script setup语法的支持状态 #

检查quasar.config.js中是否正确加载了处理<script setup lang="ts">的插件，Quasar 2.x默认支持，但如果自定义了Vite/Webpack配置，可能意外移除了@vitejs/plugin-vue（Vite）或vue-loader（Webpack），需确保这些插件在配置中存在且启用。

内容的提问来源于stack exchange，提问作者John Smith