ホーム > Laravel > LaravelのVueコンポーネントのimportを絶対パスにする方法
Laravel

LaravelのVueコンポーネントのimportを絶対パスにする方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. いきなり結論
  2. まとめ
オススメ本

⇨ Laravel 記事の目次はこちら

Laravel で Vue コンポーネントを使用する時、階層を絶対パスにしておくと、プロジェクトが大きくなった後フォルダ構成を変えたりする時に便利なのでその設定方法の記事です。

いきなり結論

webpack.mix.js に下記を追記

mix.webpackConfig({
  resolve: {
    alias: {
      "@": path.resolve("./resources/js"),
    },
  },
})

以上です！

Laravel のバージョンによっては、

"./resources/assets/js"

かもしれません。

このように書くと、js/components/AppComponent を

import AppComonent from "@/components/AppComponent"

と書いて import することができるようになります。

まとめ

いかがでしたか？

以上が、Laravel プロジェクトに入れた Vue コンポーネントを絶対パスで指定する方法になります。