如何在 Vue3 + Vite + TypeScript 项目中

要在 Vue3 + Vite + TypeScript 项目中设置别名并使其起作用，请执行以下操作：

1. 打开 tsconfig.json 文件并找到 "baseUrl" 和 "paths" 配置。如果没有，请手动添加它们。

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": [ "src/*" ]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

2. 打开 vite.config.ts 文件或创建一个新文件并添加以下内容：

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

const path = require('path');

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

这将为 src 目录创建一个别名 @，您可以在项目中使用它来引用组件、模块等，例如：

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

请注意，上面的示例仅为演示目的，并且您可以根据需要进行更改。如果您想使用 ~ 作为别名，只需将 find 属性更改为 ~/ 并更新替换属性即可。

alias: [
  {
    find: '~/',
    replacement: path.resolve(__dirname, 'src')
  }
]

然后您可以像这样使用它：

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

请确保已安装所需的依赖项和类型定义。