Nuxt 3 is out! Discover more about it on v3.nuxtjs.org

Page traduite Le contenu de cette page peut être déprécié.

La propriété alias


  • Type: Object
  • Default:
    {
      '~~': `<rootDir>`,
      '@@': `<rootDir>`,
      '~': `<srcDir>`,
      '@': `<srcDir>`,
      'assets': `<srcDir>/assets`, // (inutile si vous avez modifié `dir.assets`)
      'static': `<srcDir>/static`, // (inutile si vous avez modifié `dir.static`)
    }
    

Cette option vous permet de définir des alias vers les répertoires de votre projet (en plus de ceux ci-dessus). Ces alias peuvent être utilisés dans votre JavaScript et 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>
Dans un contexte Webpack (sources d'images, CSS - mais pas JavaScript), vous devez préfixer votre alias avec ~ (comme dans l'exemple ci-dessus).
Si vous utilisez TypeScript et que vous voulez utiliser l'alias que vous définissez dans vos fichiers TypeScript, vous devrez ajouter les alias à votre objet paths dans tsconfig.json.
Editer cette page sur GitHub Mise à jour le mer. 7 décembre 2022