对Vite创建Vue3+Ts项目的配置文件进行解析

最新推荐文章于 2024-03-12 08:59:39 发布

CssHero

最新推荐文章于 2024-03-12 08:59:39 发布

阅读量390

点赞数 7

文章标签：前端 typescript vue

本文链接：https://blog.csdn.net/CssHero/article/details/136129163

版权

文章目录

概要

对使用Vite创建Vue3+TS项目时的自动生成的配置文件进行解析

整体流程

通过Vite工具创建项目
分析目录结构

文件细节

tsconfig.json
- 在tsconfig文件中导入./tsconfig.node.json和./tsconfig.app.json

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.node.json"
    },
    {
      "path": "./tsconfig.app.json"
    }
  ]
}

tsconfig.app.json
- 在compilerOptions定义中
  - baseUrl和paths便于代码提示
  - tsBuildInfoFileTS生成信息文件，用于存储增量编译信息
  - composite用于被导入时，该文件可以被融合
  - 该文件很像老版本的tsconfig文件，现在抽离出来了
- include
  - 告诉ts哪些文件需要编译
- extends
  - 继承自哪里
- exclude
  * 指定解析时应跳过的文件名或模式数组

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",

    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

tsconfig.node.json
- 用于ssr渲染

{
  "extends": "@tsconfig/node20/tsconfig.json",
  "include": [
    "vite.config.*",
    "vitest.config.*",
    "cypress.config.*",
    "nightwatch.conf.*",
    "playwright.config.*"
  ],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

    "module": "ESNext",
    "moduleResolution": "Bundler",
    "types": ["node"]
  }
}

env.d.ts
- 放类型定义文件
- 如果下载了插件TypeScript Vue Plugin (Volar)，则可以不用申明vue模块
- Volar：
- 一个TS服务器插件，使TS服务器知道*.vue文件。
- 在*.ts文件中查找引用时，还可以从*.vue文件中获得结果。
- 在*.ts文件中重命名时，*.vue文件上的引用也会进行调整。
- 当键入导入语句时，*.vue文件也会出现以自动完成

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

//配置vue文件模块
declare module '*.vue' {
    import { DefineComponent } from 'vue'
    const component: DefineComponent
    export default component
}