Multiple Renderer Processes

[Kaffiend]

I need to implement multiple windows in my application. I couldn't find any issues regarding multiple .html templates. I gather that there will be a webpack configuration change to bundle respective templates. Is there anything seed specific I need to be aware of that might be an issue?

[YafXe]

you can try the electron-vue-windows ,this is a mutil window resource

[Kaffiend]

I'm referring to multiple html files. Something like using webpack with multipages

[YafXe]

i don't find anything about this,maybe the electron-vue can not support this feature,but, i think electron-vue-windows can resolve your porblem , and in electron , by screen can get the all displays, you can search about electron's screen. i'm sorry can not help you.

[YafXe]

I'm referring to multiple html files. Something like using webpack with multipages

the electron-vue almost is multipage ,because any route change can dispatch created function,

[ci010]

You can achieve this by configuring webpack.renderer.config.js and add some code in your main process.

For example, I want to add a logger window beside my main window.

since i'm lazy, some of code are directly copied/pasted from my project

entry: {
    renderer: path.join(__dirname, '../src/renderer/windows/main/index.js'), // main window js
    logger: path.join(__dirname, '../src/renderer/windows/logger/index.js'), // extra window js
},

then in plugins section

plugins: [
        ...
        new HtmlWebpackPlugin({ // this is same as before
            filename: 'main.html',
            chunks: ['renderer'],
            template: path.resolve(__dirname, '../src/index.ejs'),
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
            },
            nodeModules: process.env.NODE_ENV !== 'production'
                ? path.resolve(__dirname, '../node_modules')
                : false,
        }),
        new HtmlWebpackPlugin({ // this is extra one
            filename: 'logger.html', // used by BrowserWindow.loadUrl
            chunks: ['logger'], // should be the same with entry point name
            template: path.resolve(__dirname, '../src/index.ejs'),
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true,
                removeComments: true,
            },
            nodeModules: process.env.NODE_ENV !== 'production'
                ? path.resolve(__dirname, '../node_modules')
                : false,
        }),
        ...
],

Then in your main-process code, you want to load them from BrowserWindow

// baseURL is provided by this template already.
main.loadURL(`${baseURL}main.html`);
logger.loadURL(`${baseURL}logger.html`);

Also refer #634

[d0peCode]

@ci010 What if I want to load child route for new window. For example I have entry

add: path.join(__dirname, '../src/renderer/pages/add.js'),

then in pages/add.js I'm creating new vue instance with such router:

routes: [
    {
        path: '/',
        name: 'add',
        component: require('@/components/add/add').default,
        beforeEnter: (to, from, next) => guard(to, from, next),
        children: [
            {
                path: 'exp',
                component: require('@/components/add/exp').default,
                beforeEnter: (to, from, next) => guard(to, from, next)
            },

and now my add.vue component is

<template>
    <router-view></router-view>
</template>

and when I start new window which is suppose to load add.html I want it to load child route from the very beggining:

createAddExpPlaceWindow() {
    const winUrl = process.env.NODE_ENV === 'development'
        ? `http://localhost:9080/#/add/exp`
        : `file://${__dirname}/add.html/!#/exp`;

and this path file://${__dirname}/add.html/!#/exp is incorrect as I see blank window. I tried also file://${__dirname}/add.html/exp and file://${__dirname}/add.html/#/exp none of them seems to be working.

[ideacco]

I also encountered this problem, I want to build BrowserWindow through remote in rederer module to open a new window, but I don't know how to set loadURL