Vite2+Vue3+TypeScript+Element-plus脚手架搭建系列

✅01-初始化 Vite 项目
✅02-配置 Vite2 环境变量
✅03-Vite2 配置及说明
✅04-Vue3 使用 SCSS
✅05-Vue3 路由配置
✅06-TypeScript 配置及说明
✅07-Vue3 使用 axios
✅08-Vue3 axios 对象封装
✅09-ESLint 配置及说明
✅10-ESLint 与 Prettier 集成配置及说明
✅11-Mock.js 模拟接口数据
✅12-Vite2 引入 Element-Plus 框架
✅13-渐变+透明样式实现清爽登录页
✅14-Element-Plus 实现后台管理系统布局
✅15-Pinia 实现 store 状态管理
✅16-Vue3 动态路由权限控制

---

源码地址：GitHub / 码云

---

TypeScript配置及说明

🎯 目标

配置TS，验证 compilerOptions.paths 配置项是否生效。

😴 功课

什么是 tsconfig.json?

如果目录中存在 tsconfig.json 文件表明该目录是 TS 项目的根目录。TS 不是原生的 JS 代码，需要进行编译才能转换为 JS 代码。tsconfig.json 文件指定了编译项目所需的根文件和编译器选项。

💡 如果是 JS 项目，也可以用 jsconfig.json 编译。

使用 GitHub 上的基本配置

根据你的 JavaScript 运行时环境（node10、node12、node14、React Native等），可以在 这里 选择基本配置，基于这些 tsconfig.json 来扩展，可达到简化配置的目的。

配置项说明

需要了解更多配置项的同学请参照 TS官网 。

🌈 Coding

配置TS

tsconfig.json 代码如下：

{
  // ↓可以省略compilerOptions配置，这将使用编译器的默认值
  "compilerOptions": {
    // ↓指定编译的ECMAScript目标版本
    "target": "es2020",
    // ↓指定生成哪个模块系统代码
    "module": "es2020",
    // ↓指定模块解析策略：'node' (Node.js) 或 'classic' (TypeScript 1.6 版本之前使用)
    "moduleResolution": "node",
    // ↓启用所有严格类型检查选项。
    "strict": true,
    // ↓编译过程中需要引入的库文件
    "lib": [
      "es2020"
    ],
    // ↓编译时是否生成.map文件
    "sourceMap": true,
    // ↓支持使用import fs from 'fs'的方式引入commonjs包
    "esModuleInterop": true,
    // ↓忽略所有的声明文件（ *.d.ts）的类型检查。
    "skipLibCheck": true,
    // ↓引入文件时区分文件名大小写
    "forceConsistentCasingInFileNames": true,
    // ↓设置基本目录以解析非绝对模块名称
    "baseUrl": ".",
    // ↓设置模块名称到基于baseUrl的路径映射
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  // ↓指定要编译的文件，这些文件名是相对于包含tsconfig.json的目录解析的。
  // ↓支持通配符：* （匹配0或多个字符）、? （匹配一个任意字符）、**/ (递归匹配任意子目录))
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  // ↓和include一样，不过是指定解析include时应跳过的文件
  "exclude": [
    "node_modules",
    "dist",
    "**/*.js"
  ]
}

用 @ 映射 ts 文件路径

测试在 main.ts 用 @ 导入 router ：

......
import router from '@/router/index'
......

💡 如果 compilerOptions.paths 配置错误，VS Code 会飘红，提示找不到 router 模块。

🎭 结果

用 @ 映射路径导入 router， VS Code 没有错误提示。页面访问正常。

---

本文为博主原创文章，任何个人、团体、机构转载和摘录，请注明出处。