如何在Vite+Vue3开发模式启用严格模式提前排查错误？

要在开发阶段提前发现strict模式下的TypeScript错误，可通过以下几种方式配置：

方法一：通过Vite Vue插件内置的类型检查 #

修改vite.config.ts，开启Vue插件的类型检查和模板严格校验：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      // 开启Vue模板的严格模式检查，比如未声明变量、类型不匹配等问题
      template: {
        strict: true
      },
      // 启用TypeScript类型检查，开发时自动运行tsc --noEmit检测错误
      typeCheck: true
    })
  ]
})

方法二：使用vite-plugin-checker实时检测 #

该插件能在开发服务器运行时，将TS错误实时显示在终端或浏览器控制台：

1. 安装插件：

npm install vite-plugin-checker --save-dev

2. 修改vite.config.ts：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import checker from 'vite-plugin-checker'

export default defineConfig({
  plugins: [
    vue(),
    checker({
      // 启用TypeScript类型检查
      typescript: true
    })
  ]
})

额外注意 #

确保tsconfig.json中strict字段保持true，这是所有严格检查规则的基础：

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    // 其他配置项...
  }
}

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