Vite + TypeScript 專案中使用路徑別名

1.安裝依賴，plugin-alias，以及types/node。

npm install @vitejs/plugin-alias --save-dev

npm install @types/node --save-dev

2.在 vite.config.js 文件中配置路徑別名。

// vite.config.ts
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
});

3.在tsconfig.json 使用 paths 屬性來設置別名(@)和對應的路徑(src/*)。

{
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ],
  "compilerOptions": {
    "types": ["node"],
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

4.確保 tsconfig.app.json 中包含 src 目錄的引用：

//tsconfig.app.json
{
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

5.在專案的根目錄下創建一個類型聲明文件，例如 src/shims-vue.d.ts

// src/shims-vue.d.ts
declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

這樣 TypeScript 就會正確地識別 .vue 文件。

設置好，頁面中即可使用以下方式引入組件

import MyComponent from '@/components/MyComponent.vue';