① import.meta 报类型错误
提示的是 仅当 “--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 扩展:
在当前工作区禁用即可,这样 volar 的 typescript 语言服务器会在 当前工作区 代替内置的 TypeScript 语言服务器,更好地给单文件组件提供 TypeScript 特性。