Translated page Contents of this page might be outdated.
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 Mon, Aug 19, 2024












































