vite2 升级 vite3 时 typescript 配置自踩坑点

900 阅读1分钟

① import.meta 报类型错误

image.png

提示的是 仅当 “--module” 选项为 “es2020”...才允许使用 “import.meta” 元属性。。你可能不会遇到这个问题,我的原因是我的 tsconfig.json 中某一条 include 配置成了这样:

{
  "include": [
    "src/**/*.{ts,vue}"
  ]
}

改成这样就可以了:

{
  "include": [
    "src/**/*"
  ]
}

完整的 include 是:

{
  "include": [
    "src/**/*.{ts,vue}",
    "env.d.ts",
    "vite.config.*"
  ]
}

其中,env.d.ts 是一个自定义的环境变量类型声明文件,因为我在代码中用到了 import.meta.env 这个东西,这个 env 成员的类型是由 vite 提供的,所以我直接引用 vite 的类型声明并补充我自己需要的环境变量即可:

/// <reference types="vite/client" />

interface ImportMetaEnv {
  VITE_CESIUM_BASE_URL: string
}

这样,我就能在代码中访问 import.meta.env.VITE_CESIUM_BASE_URL 这个记录在 .env 文件中保存的环境变量了:

VITE_CESIUM_BASE_URL = './lib/cesium'

② .vue 模块不识别

这个需要参考官方文档,Vue.js 文档 - 搭配 TypeScript 使用 - Volar Takeover 模式

在你的 VSCode 中搜索 @builtin typescript 扩展:

image.png

在当前工作区禁用即可,这样 volar 的 typescript 语言服务器会在 当前工作区 代替内置的 TypeScript 语言服务器,更好地给单文件组件提供 TypeScript 特性。