More than 3 years have passed since last update.

【Laravel + Vue】ファイルパスに .. を使いたくない【webpackConfig Alias】

Posted at 2020-08-15

問題

階層が深いところから、上の呼び出すときに
..がたくさん連なったりしてわかりにくい

App.vue

import Hoge from '../../../components/Hoge'

webpackConfigでエイリアスを設定する

webpack.mix.js

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

これで@/components/Hogeとやれば
/resources/js/components/Hoge見たく展開される