CODEWITHSUNDEEP
cordovavue.jswebpack
Eli
Eli

Reputation: 768

Cordova VueJs Webpack lazy loading fails in production

I have a default Vue.js CLI 3 application that uses webpack to lazy load the pages as needed, this is done like:

{
    path: "videos",
    component: () => import("./../views/root/videos/VideosController"),            
},

This works perfectly fine on desktop and when running in cordova dev mode (using this: https://www.npmjs.com/package/vue-cli-plugin-cordova)

The issue I have ran into though is when building for cordova ios production. On device it loads the first chunk, then fails every time it tries to load another (e.g page change) with this error message:

2019-12-29 00:59:01.529674+1300 HIP[5835:1667996] NSURLConnection finished with error - code -1100
2019-12-29 00:59:01.530513+1300 HIP[5835:1667995] NSURLConnection finished with error - code -1100
2019-12-29 00:59:01.531501+1300 HIP[5835:1667995] NSURLConnection finished with error - code -1100
2019-12-29 00:59:01.532403+1300 HIP[5835:1667995] NSURLConnection finished with error - code -1100
2019-12-29 00:59:01.537502+1300 HIP[5835:1667969] /blog/mngcDUwLBKBMDa17W3F8/believe-in-yourself
2019-12-29 00:59:01.543607+1300 HIP[5835:1667969] ERROR: {"code":"CSS_CHUNK_LOAD_FAILED","request":"css/chunk-efa8f284.a9f372e1.css","line":1,"column":2774,"sourceURL":"file:///private/var/containers/Bundle/Application/58A6438F-E877-4C93-8C6D-EF299FC47147/HIP.app/www/js/app.15ed20c2.js"}

Does anyone have any ideas as to why this might be breaking? I can't find anything from Googling the error message, but may be missing something.

Additionally, here is my vue.config.js file

    runtimeCompiler: true,
    chainWebpack: config => {
        config.module
            .rule("html")
            .test(/\.html$/)
            .use("html-loader")
            .loader("html-loader")
            .options({
                dynamicTyping: true,
                header: true,
                skipEmptyLines: true
            })
            .end();

        config.module
            .rule("less")
            .test(/\.less$/)
            .use("less-loader")
            .loader("less-loader")
            .loader("css-loader")
            .loader("style-loader")
            .end();
    },
    publicPath: '',
    pluginOptions: {
        cordovaPath: 'cordova'
    },
    devServer: {
        https: false
    }
}

Upvotes: 0

Views: 392

Answers (1)

Eli
Eli

Reputation: 768

The issue was using "history" mode instead of "hash" mode in the Vue router. This was due a misunderstanding of

The plugin already tries to fix this automatically...

in the docs for vue-cli-plugin-cordova.

Upvotes: 1

Related Questions