新建next.js项目，customize the default import alias是否要自定义默认导入别名（@/*）的选项区别

amnesia999 / 2024-10-23 / 原文

使用命令 npx create-next-app@latest 新建项目时，会自定义一些选项，如下图：

其中自定义导入别名的选项，选择Yes 或 No 有何区别？
Would you like to customize the default import alias (@/*)? ... No / Yes

一、选择 "Yes"

jsconfig.js 文件的内容是：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

例如，有一个位于 src/components/layout.js 的文件，你可以使用 import Layout from '@/components/layout' 来导入。

二、选择 "No"

jsconfig.js 文件的内容是：

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

这种情况下，只能使用相对路径或者绝对路径导入文件。

三、如何配置导入别名

导入别名的设置并非必须项。当项目结构较为复杂时，设置导入别名可便捷开发。即使创建项目时，选择了"No"，后续也可以通过修改jsconfig.js文件来重新定义导入别名，还可以增加其他别名设置。案例如下：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src"],
      "components/*": ["src/components/*"],
      "pages/*": ["src/pages/*"],
      "assets/*": ["src/assets/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}