alias プロパティ

Nuxt.js では、エイリアスを使って 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 オブジェクトにエイリアスを追加する必要があります。

間違いを見つけた、またはドキュメントに貢献したいですか? GitHub でこのページを編集する

Partners

  • Netlify
  • Google Chrome
  • Vercel
  • Swell
  • Strapi
  • Ship Shape
  • Layer0
  • Storyblok
  • Netlify
  • Google Chrome
  • Vercel
  • Swell
  • Strapi
  • Ship Shape
  • Layer0
  • Storyblok
Support Us