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

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本

Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう！！

読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

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 コンポーネントを絶対パスで指定する方法になります。