Src 别名的配置

在开发项目的时候文件与文件关系可能很复杂，因此我们需要给src文件夹配置一个别名！！！

vite.config.ts 中的配置

// vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入路径相关依赖 使用命名导入：规避Nodejs 内置模块没有默认导出的问题
import * as path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': path.resolve('./src'), // 相对路径别名配置，使用 @ 代替 src
        },
    },
})

tsconfig.json 中的配置

在新版本中，tsconfig.json 这个文件变成了一个入口文件，所以我们要在 tsconfig.app.json 中进行配置：

{
    "compilerOptions": {
        "target": "ES2020", // 目标 JavaScript 版本
        "useDefineForClassFields": true, // 支持类字段语法
        "module": "ESNext", // 模块系统
        "lib": [
            "ES2020",
            "DOM",
            "DOM.Iterable"
        ], // 包含的库
        "skipLibCheck": true, // 跳过库文件的类型检查
        "moduleResolution": "Node", // 模块解析方式
        "allowImportingTsExtensions": true, // 允许导入带 .ts 扩展名的文件
        "isolatedModules": true, // 每个文件视为单独模块
        "moduleDetection": "force", // 强制所有文件都作为模块处理
        "noEmit": true, // 不生成输出文件
        "jsx": "preserve", // JSX 保留（通常用于 Vue 中的 JSX 语法）
        /* 代码质量检查 */
        "strict": true, // 启用所有严格类型检查选项
        "noUnusedLocals": true, // 不允许未使用的局部变量
        "noUnusedParameters": true, // 不允许未使用的参数
        "noFallthroughCasesInSwitch": true, // 不允许 switch 语句的 case 落空
        "esModuleInterop": true, // 启用 ES 模块与 CommonJS 模块的互操作性
        "allowSyntheticDefaultImports": true, // 允许默认导入未提供默认导出的模块
        "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
        "paths": { //路径映射，相对于baseUrl
            "@/*": [
                "src/*"
            ]
        }
    },
    "include": [
        "src/**/*.ts",
        "src/**/*.tsx",
        "src/**/*.vue"
    ], // 包含的文件
    "exclude": [
        "node_modules"
    ] // 排除的文件夹
}