翻訳されたページこのページのコンテンツは古い可能性があります。

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>