A propriedade alias

O Nuxt permite você usar apelidos para acessar diretórios personalizados dentro do seu JavaScript e do seu CSS

Type: Object

Default:

{
  '~~': `<rootDir>`,
  '@@': `<rootDir>`,
  '~': `<srcDir>`,
  '@': `<srcDir>`,
  'assets': `<srcDir>/assets`, // (a menos que você tenha definido um `dir.assets` personalizado)
  'static': `<srcDir>/static`, // (a menos que você tenha definido um `dir.static` personalizado)
}

Esta opção permite você definir apelidos para os diretórios dentro do seu projeto (além daqueles acima). Estes apelidos podem ser usados dentro do seu JavaScript e do seu 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>

Dentro de um contexto do Webpack (fontes de imagem, CSS - mas não JavaScript) você deve prefixar o apelidos com ~ (assim como no exemplo acima).

Se você estiver usando o TypeScript e quiser usar os apelidos que você define dentro do seus ficheiros TypeScript, você precisará adicionar os apelidos ao seu objeto de paths dentro do ficheiro tsconfig.json.

Edit this page on GitHub Updated at Thu, Apr 25, 2024