解决vue3项目中缺少tsconfig的问题
2025-06-11 15:28:13 #vue3 #工程提速

完善vue3项目中的TS配置。

正文

在 Vue 3 项目中，如果你没有 tsconfig.json 文件，但希望配置 TypeScript 支持，可以按照以下步骤操作：

1. 安装必要的依赖

首先确保你已经安装了 TypeScript 和 Vue 的 TypeScript 支持：

1
npm install --save-dev typescript @vue/tsconfig

2. 创建 tsconfig.json 文件

在项目的根目录下创建一个 tsconfig.json 文件，并添加如下基础配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": false,
    "jsx": "preserve",
    "importHelpers": true,
    "experimentalDecorators": true,
    "strictFunctionTypes": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "baseUrl": ".",
    "allowJs": false,
    "resolveJsonModule": true,
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["unplugin-vue-define-options/macros-global" /* ... */]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/*.d.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

3. 配置说明

  • "target": 设置编译时的目标 JavaScript 版本，例如 "ESNext" 表示使用最新的 ECMAScript 标准。
  • "module": 指定要使用的模块系统类型，如 "ESNext" 使用 ES6 风格的模块化。
  • "moduleResolution": 定义模块解析策略，如 "bundler" 适用于现代打包工具。
  • "strict": 启用所有严格的类型检查选项。设置为 false 表示不启用严格模式。
  • "jsx": 指定 JSX 的处理方式，如 "preserve" 保留 JSX 不做转换。
  • "importHelpers": 是否导入辅助函数以减少重复代码。
  • "experimentalDecorators": 启用对实验性装饰器特性的支持。
  • "strictFunctionTypes": 对函数参数和返回值进行更严格的类型检查。设置为 false 表示不启用。
  • "skipLibCheck": 跳过对库文件（.d.ts）的类型检查。
  • "esModuleInterop": 允许与 ES 模块进行互操作。
  • "isolatedModules": 支持在隔离环境中编译每个文件。
  • "allowSyntheticDefaultImports": 允许从没有默认导出的模块进行默认导入。
  • "forceConsistentCasingInFileNames": 强制文件名大小写一致。
  • "sourceMap": 生成对应的 source map 文件。
  • "baseUrl": 解析非相对模块的基准目录。
  • "allowJs": 是否允许编译 JavaScript 文件。
  • "resolveJsonModule": 允许通过 import 语法导入 JSON 模块。
  • "paths": 设置路径映射，方便模块导入，如 "@/*" 映射到 "./src/*"。
  • "types": 指定引入的全局类型定义包。
  • "include": 指定需要包含在编译过程中的文件或目录。
  • "references": 引入其他 tsconfig.json 文件，用于多项目管理。

4. 使用 Vite 配置（如果适用）

如果你使用的是 Vite 构建工具，确保你的 vite.config.js 或 vite.config.ts 中包含了对 TypeScript 的支持。通常情况下，Vite 会自动处理 TypeScript 文件，但你可以显式地添加插件来增强支持：

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig({
  plugins: [
    vue(),
    tsconfigPaths(), // 添加此行以支持 tsconfig.json 中的路径映射
  ],
});

5. 测试配置

最后，确保你的项目能够正确编译和运行。你可以通过运行开发服务器或构建命令来测试配置是否生效：

1
npm run dev

或

1
npm run build

完成以上步骤后，你的 Vue 3 项目应该已经成功配置了 TypeScript 支持。如果有任何问题，请查看控制台输出的日志信息，或者提供具体的错误信息以便进一步排查。

结语

最近在使用 ruoyi-vue3 的前端框架的时候，才发现到现在为止都没有使用 tsconfig 的配置，所以自己这里按照自己的想法开始重构。

最基础的，要引入 ts 来书写项目，TS 在 hooks 中还是很好用的。

参考

通义千问

Prev
2025-06-11 15:28:13 #vue3 #工程提速