DQ博客

切换主题

二、nuxt.config.ts的配置 ​

一、alias（别名） ​

1、默认别名配置 ​

默认情况下，别名配置如下：

json
{
  "~": "/<srcDir>",
  "@": "/<srcDir>",
  "~~": "/<rootDir>",
  "@@": "/<rootDir>",
  "assets": "/<srcDir>/assets",
  "public": "/<srcDir>/public"
}

解释：

  • "~" 和 "@" 指向 srcDir 目录。
  • "~~" 和 "@@" 指向 rootDir 目录。
  • "assets" 指向 srcDir 下的 assets 目录。
  • "public" 指向 srcDir 下的 public 目录。

2、示例配置 ​

nuxt.config 文件中定义自定义别名

typescript
export default {
  alias: {
    'images': fileURLToPath(new URL('./assets/images', import.meta.url)),
    'style': fileURLToPath(new URL('./assets/style', import.meta.url)),
    'data': fileURLToPath(new URL('./assets/other/data', import.meta.url))
  }
}

解释：

  • 'images' 别名指向 ./assets/images 目录。
  • 'style' 别名指向 ./assets/style 目录。
  • 'data' 别名指向 ./assets/other/data 目录。

3、注意事项 ​

  1. Webpack上下文中的使用： 在Webpack上下文中（例如图像资源、CSS文件，但不包括JavaScript文件），你必须在访问别名时前缀 ~。
  2. 自动添加到 .nuxt/tsconfig.json： 这些别名会自动添加到生成的 .nuxt/tsconfig.json 中，这样你可以获得完整的类型支持和路径自动补全。如果需要进一步扩展 .nuxt/tsconfig.json 提供的选项，请确保在这里或者在 nuxt.config 文件中的 typescript.tsConfig 属性中添加。