Vue.jsとNuxt.jsでファイルのimportを相対パスではなく絶対パスで指定する方法

thumnail
2019-12-29

相対パスで指定するのが面倒.jsのアプリケーションにて、ファイルのpathを毎度、相対パスで書いていて面倒だったので、絶対パスで指定する方法を調べた。その備忘録としてその内容をこの記事に残しておく。

相対パスでimportするデメリット

  • コードの可読性が低下する
  • 階層が深いファイルに対して../../../でpathを指定するが大変
  • ファイルの階層が変わるごとにimport pathを書き換えなくてはいけない

絶対パスを使った場合のデメリットは特に見当たらなかったので、絶対パスを使うべきだと思う。

Vue.js編 | 絶対パスでファイルをimportする方法

vue.config.jsでaliasを設定する

まずはVue.jsで絶対パスを使ってファイルをimportする方法について解説する。ここで必要となるのはaliasをvue.config.jsで設定することだ。結論からいうと次の設定をvue.config.jsに記述すれば良い。

    var path = require('path')
    
    module.exports = {
      ...
    
      configureWebpack: {
        resolve: {
          alias: {
            vue$: 'vue/dist/vue.esm.js',
            '@': path.resolve(__dirname, 'src/'),
          },
        },
      },
    } 

このような設定をすると、@で同階層にあるsrcフォルダ以下の部分を指すことができる。例えば、srcフォルダの中にcomponentsというatomic designのパーツが入ったフォルダ・ファイルがあるとして、この中のどれかを指定する場合

import <module名> from "@/components/organisms/<ファイル名>";

と@を使って../を無しで綺麗にパスを書くことができる。

Nuxt.js編 | 絶対パスでファイルをimportする方法

nuxt.config.jsにaliasを設定する

次にNuxt.jsで相対パスを設定する方法について紹介する。とはいってもNuxt.jsではデフォルトで~/でプロジェクトの親ディレクトリを参照することができるので特に必要がないかも知れない。ただ、aliasを貼ってファイルパスを短く書くことができるので一応紹介しておく。こちらも結論からいうとnuxt.config.jsに次のような設定をすれば良い。

    build: {
        extend(config) {
          let path = require('path')
          config.resolve.alias['@components'] = path.join(__dirname, 'components')
          config.resolve.alias['@store'] = path.join(__dirname, 'store')

これによって

import <モジュール名> from '@component/適当なパス/ファイル名'

といったようにパスを指定できるようになる。少しフォルダの階層が深く、良く使うファイルがある場合はaliasを定義すると便利かも。

この記事内容とは関係ありませんが、筆者である僕が普段愛用しているPC周りのアイテムを別記事で紹介しているので、もし興味があればご覧になってください。

現在使用しているディスプレイ・ヘッドフォン・キーボードなどを紹介

KATUBLO

Copyright since 2018 KATUO All Rights Reserved.