Laravel Mix and Path Settings

Date [ 09 Dec 17 09:36 +0400 ] Categories [ tech , tiny-tips ] Tags [ vue , laravel-mix ]

A quick refernece for myself, when setting up new asp.net core spa and VueJS based project along with laravel mix the following setting helps in translating the path resolution correctly:

1
2
mix.setResourceRoot('/dist/')
   .setPublicPath(path.normalize('wwwroot/dist'));

so a typical laravel-mix webpack.mix.js file for asp.net core and vue js project (especially with admin-lte) would look like:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
mix.js('client-src/main.js','')
    .extract([
        'vue',
        'vue-router',
        'vuex',
        'chart.js',
        'admin-lte',
        'bootstrap',
        'jquery',
    ])
    .autoload({
        jquery: ['$','jQuery', 'window.jQuery']
    })
    .sass('client-src/assets/vendor.scss','')
    .sass('client-src/assets/main.scss','')
    .setResourceRoot('/dist/')
    .setPublicPath(path.normalize('wwwroot/dist'))