您正在浏览 Nuxt 2 文档。前往 Nuxt 3 文档， 或了解更多关于 Nuxt 2 长期支持。

alias 属性

Nuxt 允许使用别名在 JavaScript 和 CSS 中访问自定义目录。

  • 类型: Object
  • 默认值: 
    {
  '~~': `<rootDir>`,
  '@@': `<rootDir>`,
  '~': `<srcDir>`,
  '@': `<srcDir>`,
  'assets': `<srcDir>/assets`, // （除非设置了 `dir.assets`）
  'static': `<srcDir>/static`, // （除非设置了 `dir.static`）
}

此选项允许为项目内的目录（除上述目录外）定义别名，这些别名可在 JavaScript 和 CSS 中使用。

nuxt.config.js
import { resolve } from 'path'
export default {
  alias: {
    'images': resolve(__dirname, './assets/images'),
    'style': resolve(__dirname, './assets/style'),
    'data': resolve(__dirname, './assets/other/data')
  }
}
components/example.vue
<template>
  <img src="~images/main-bg.jpg">
</template>

<script>
import data from 'data/test.json'

// etc.
</script>

<style>
@import '~style/variables.scss';
@import '~style/utils.scss';
@import '~style/base.scss';

body {
  background-image: url('~images/main-bg.jpg');
}
</style>
在 webpack 上下文中（图片源、CSS，但 JavaScript 除外），别名前需要加 ~ 前缀（如上例所示）。
如果使用 TypeScript 并希望在 TypeScript 文件中使用自定义别名，需要将别名添加到 tsconfig.json 的 paths 对象中。
Edit this page on GitHub Updated at Tue, Apr 14, 2026