Vite + Vue3 + Typescript 路径别名配置

[jtwang7]

Vite + Vue3 + Typescript 路径别名配置

参考链接：vue3+ts+vite创建的项目-配置路径别名

修改 vite.config.js/ts

找到 vite.config.js/ts 文件，进行下面配置。路径别名如果单个的话alias后面写对象，多个的话写数组，里面再放对象。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path'; // 若出现“找不到模块“path”或其相应的类型声明”，安装 @type/node 即可

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue()
  ],
  // 设置路径别名
  resolve: {
    alias: [
      {
        find: '@',
        replacement: path.resolve('./src')
      }
    ]
  }
})

修改 ts.config.json

如果是TypeScript项目编写，还要修改一下TypeScript的配置。找到ts.config.json文件，进行以下配置。

{
    "compilerOptions": {
        "target": "esnext",
        "useDefineForClassFields": true,
        "module": "esnext",
        "moduleResolution": "node",
        "strict": true,
        "jsx": "preserve",
        "sourceMap": true,
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "lib": ["esnext", "dom"],
        // 路径配置
        "baseUrl": ".",
        "paths": {
            "@/*": ["src/*"]
        }
    },
    "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
    "exclude": ["node_modules"],
    "references": [{ "path": "./tsconfig.node.json" }]
}