With Vue + Vue-Router, Can't use lazyload component

[chenzhiguo]

The project is created by electron-forge init demo --template=vue Only vue + vue-router, I use the many method to lazyload vue component, but has error:

Error: Failed to resolve async component default: AssertionError: path must be a string
    at /Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1708:17
    at /Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1766:15
    at /Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1717:11
    at /Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1742:66
    at Array.map (native)
    at /Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1742:38
    at Array.map (native)
    at flatMapComponents (/Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1741:26)
    at /Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1677:5
    at iterator (/Users/Silence/Desktop/electron-demo/demo/node_modules/_vue-router@2.7.0@vue-router/dist/vue-router.js:1876:7)

**1. Lazy load must rely on webpack? Has the electron-forge include it?

2. I am trying many way, but there is no way to work properly. such as:**

   
   'use strict';
   import Vue from 'vue/dist/vue.js';
   import Router from 'vue-router/dist/vue-router.js';

Vue.use(Router);

let router = new Router({ routes: [ { path: '/', redirect: '/index' }, { name: 'login', path: '/login', // component: require('./components/Login.vue') //working // component: resolve => System.import('./components/Login.vue') //not working // component: () => import('./components/Login.vue') //not working component: view('Login') //not working }, { name: 'test', path: '/test/:userId', component: resolve => require(['./components/Test.vue'], resolve) //not working }, { path: '*', redirect: '/' } ] });

/**

• Asynchronously load view (Webpack Lazy loading compatible)
• @param {string} name the filename (basename) of the view to load. */ function view(name) { return function(resolve) { require(['./components/' + name + '.vue'], resolve); } };

export default router;

Can your help me point out the mistake? Thanks! waiting...

[MarshallOfSound]

Uhhh, System.import is like not a thing in Electron? Why can'y you just either use require which you indicate works or use import Thing from './here'; at the top of the file?

[chenzhiguo]

@MarshallOfSound Just to lazyload the *.vue file. If use require or import, will the file be loaded immediately?

[MarshallOfSound]

@chenzhiguo Why do you want to lazy load it though? You aren't loading the component over HTTP, there is no file size concern here. It's literally just reading a file from the local filesystem. Lazy loading for Electron apps makes no sense?

[chenzhiguo]

Aha...I feel you are very reasonable, you are convinced. But, if I want use it, Is required to use webpack? Do you know this one? @MarshallOfSound

[MarshallOfSound]

@chenzhiguo If you realllllyyyy want to lazy load even if you're literally just loading a local file 😕

You can just wrap require in a function so it isn't called immediately.

  component: () => require('./components/Login.vue')

[wahengchang]

YOU guys are so funny ! lol (commented by a guy who is looking for solution of vue-router in eletron)