VUE + TS + VITE 项目配置路径别名

VUE + TS + VITE 项目配置路径别名

vite 配置

vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from "path";

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

此处可能会报错Cannot find module path or its corresponding type declarations，通常是因为 TypeScript 无法找到 path 模块。这可能是因为 TypeScript 默认情况下不包含 Node.js 的内置模块类型声明。

安装@types/node 即可

根据自己的项目选择合适的安装方式：

npm install @types/node --save-dev

pnpm install @types/node --save-dev

yarn add @types/node --dev

ts 配置

tsconfig.json

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

新版的 ts这里我们可以看到引入了两个配置文件，对应的配置在这两个文件中进行的。
根据名称不难理解，一个是项目 app 相关的配置，一个是 node 相关的配置。 我们可以选择新创建一个json 文件进行配置并引入，也可以在原有配置文件上修改。 这里就在选择在app中 增加路径别名的配置，找到对应的文件tsconfig.app.json： tsconfig.app.json

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "preserve",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,

    /* 新增配置部分 - 识别路径别名 */
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

当然如果你的 ts 版本不是最新的，那么直接在tsconfig.json 文件的 compilerOptions 板块下配置也是一样的噢