要在 Vue3 + Vite + TypeScript 项目中设置别名并使其起作用，请执行以下操作：
- 打开
tsconfig.json文件并找到"baseUrl"和"paths"配置。如果没有，请手动添加它们。
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": [ "src/*" ]
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}
- 打开
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';
请确保已安装所需的依赖项和类型定义。
