如何将Nuxt3项目VSCode自动导入路径从~/改为@/？

可以通过调整Nuxt配置和TypeScript配置实现需求，具体操作如下：

1. 修改Nuxt配置文件（nuxt.config.ts） #

在项目根目录的nuxt.config.ts中添加别名映射，让@指向项目根目录，并同步到TypeScript配置中：

export default defineNuxtConfig({
  alias: {
    '@': './'
  },
  typescript: {
    tsConfig: {
      compilerOptions: {
        paths: {
          '@/*': ['./*']
        }
      }
    }
  }
})

2. 更新tsconfig.json #

在你现有的tsconfig文件中，补充paths配置，确保VSCode和TypeScript能正确识别@/路径：

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

3. 重启服务与编辑器 #

修改完成后，重启Nuxt开发服务（终止当前npm run dev进程后重新启动），同时重启VSCode让配置完全生效。之后自动导入生成的路径就会统一使用@/directory/file格式。

注：Nuxt默认的~和配置后的@指向相同的项目根目录，两者可并行使用，但自动导入会优先采用你配置的@前缀。

内容的提问来源于stack exchange，提问作者J. Jackson