【Vue】vite + ts 配置别名

1.vite.config.ts

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

function _resolve(dir: string) {
  return resolve(__dirname, dir)
}

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': _resolve('src'),
    },
  }
})

2.tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "importHelpers": true, // 不让同样的辅助函数重复的出现在多个文件中
    "allowSyntheticDefaultImports": true, // 允许对不包含默认导出的模块使用默认导入。
    "baseUrl": ".", // 非相对模块的导入可以相对于baseUrl或通过下文会讲到的路径映射来进行解析
    "lib": [
      "esnext",
      "dom"
    ],
    "paths": { // 配置导出路径（这里根据自己项目执行修改）
      "@/components*": [
        "./src/components*"
      ],
      "@/layouts*": [
        "./src/layouts*"
      ],
      "@/assets*": [
        "./src/assets*"
      ],
    },
    "skipLibCheck": true
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

遇到的报错：

新项目在添加别名时，想要引入node的path模块，vscode提示错误。

原因分析：path模块是node.js内置的功能，但是node.js本身并不支持typescript，所以直接在typescript项目里使用是不行的

解决方法：安装@types/node

yarn add @types/node