[Vuejs]-Global Vue Component Exposure via Webpack

by

1👍

✅

Apart from what @skribe said,

Vue.component('base-select',  () => import('./components/base-select.vue').then(m => m.default));

That should expose all components globally. In order to support the routings called by .NET Core, you have to add an additional parameter called publicPath. publicPath allows you to globally expose files relatively to a root public path that you have declared, which in this case is publicPath.

module.exports = function (env) {
    env = env || {};
    var isProd = env.NODE_ENV === 'production';

    // Setup base config for all environments
    var config = {
        entry: {
            main: './Webpack/js/main'
        },
        output: {
            // The format for the outputted files
            filename: '[name].js',
            // Put the files in "wwwroot/js/"
            path: path.resolve(__dirname, 'wwwroot/dist/'),
            // ============ ADD THE LINE BELOW ============= //
            publicPath: '/dist/'
        },
👤Nicholas

1👍

I believe this may be caused by your async / dynamic import syntax which recently changed for vue-loader, which now uses “…ES modules internally to take advantage of webpack 3 scope hoisting.” (see release notes below)

Try your import like this

Vue.component('base-select',  () => import('./components/base-select.vue').then(m => m.default));

https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

Edit try changing the output chunk file name to a relative path like in the following. 

  output: {
         // The format for the outputted files
        filename: '[name].js',

        // Put the files in "wwwroot/js/"
        path: path.resolve(__dirname, 'wwwroot/dist/')

        // Set chuck file name
         chunkFilename:'../../js/[name].bundle.js'
    },
👤skribe

Leave a comment