在Vite配置@别名需要两步进行
1、修改vite.config.js（让程序支持）
2、修改jsconfig.json（让编辑器支持）
修改vite
export default defineConfig({
plugins: [
vue(),
],
resolve: {
alias: {
"@": resolve(__dirname, 'src'), // 路径别名
},
extensions: ['.js', '.json', '.ts'] // 使用路径别名时想要省略的后缀名，可以自己 增减
}
})
修改jsconfig.json
{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"] }
在项目中使用 @ 符号作为路径别名通常是一种常见的做法，特别是在使用构建工具（如Webpack、Vue CLI、Create React App等）时。这个别名通常被配置为指向项目的根目录或其他特定的目录。与使用相对路径相比，使用别名有一些优势：
-
可读性： 别名使代码更具可读性。使用
@等符号能够清晰地表示路径的含义，例如@/components/Header可能表示项目中的一个通用头部组件。 -
减少重复： 别名可以减少代码中的路径重复。如果项目结构发生变化，只需更新别名的配置，而不必修改代码中的每个相对路径。
-
简化引入： 使用别名可以简化模块和组件的引入。通过别名，可以避免在引入时使用相对路径的繁琐，例如
../../components/Header。 -
提高可维护性： 当项目的目录结构变得复杂时，使用别名有助于提高代码的可维护性。开发者可以更轻松地理解和导航代码。
-
配置灵活性： 使用别名可以在构建工具的配置中灵活地指定路径映射，而不必依赖于项目目录的实际结构。
-
避免深度陷阱： 使用相对路径可能会导致深度嵌套的路径，使得代码变得难以理解。别名可以将这种深度陷阱减少到最小。
示例（Vue CLI 中的配置）：
// vue.config.js
module.exports = {
configureWebpack: {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
'assets': path.resolve(__dirname, 'src/assets'),
'components': path.resolve(__dirname, 'src/components'),
}
}
}
}
在上述配置中，@ 别名指向项目的根目录，assets 和 components 别名指向了相应的目录，使得在项目中引入模块和组件时更加简洁。
