Vue3项目别名@的配置

1. jsconfig.json 文件配置别名

文件内容如下：
    {
        "compilerOptions": {
            "baseUrl": ".",
            "paths": {
                "@/*": ["./src/*"],
            }
        },
        "exclude": ["node_modules", "dist"]
    }

2. vite.config.js 文件配置别名

//首先导入resolve模块
import {resolve} from 'path'

//然后这样配置即可
export default defineConfig({
    // 起个别名，在引用资源时，可以用‘@/资源路径’直接访问
    resolve: {
        alias: {
        "@": resolve(__dirname, "src"),
        },
    },
    plugins: [vue()],
})

3. 注意事项

3.1 上述两个配置别名的作用：

• jsconfig文件中的配置是当我们键入@提示路径
• vite文件中的配置是让浏览器能够识别@代表src路径

所以两个都要配置

3.2 viteconfigjs中配置别名的作用和jsconfig中配置别名的作用的区别是（bing的回答结果）：

• viteconfigjs中配置别名的作用是为了让 vite 能够正确地解析模块导入的路径，并且在开发和构建时都能生效。viteconfigjs中的别名配置只对 vite 有效，不会影响其他工具或编辑器的路径解析。
• jsconfig中配置别名的作用是为了让 VSCode 等编辑器能够正确地解析模块导入的路径，并且提供智能提示、跳转等功能。jsconfig中的别名配置只对编辑器有效，不会影响 vite 或其他工具的路径解析。

因此，如果你想在 vite 项目中使用别名，并且让编辑器也能识别，你需要在两个地方都进行配置。