Блог

В контексте приложения Electron vuejs мне нужно использовать много окон в моем приложении, например, модалы на веб-сайте.

Для этого я создал сервис для управления окном/модалом в своем приложении.

В начале создания моего электронного приложения я использую vue-маршрутизатор с режимом истории.

В этом режиме маршрутизатора все мои окна работают как по волшебству

НО моя электронная производственная среда не работает, потому что я использую режим маршрутизатора истории.

Теперь я использую маршрутизатор в режиме хэширования (подробнее объясню здесь)

и моя производственная среда работает как волшебство

НО сейчас (и это главное в этом посте!) Все новые созданные окна содержимого одинаковы.

Это первый URL-адрес компонента, смонтированный, потому что связанный URL-адрес «/». Маршрутизатору наплевать на весь URL-путь, как это : http://localhost:8080/employee/edit/20 Исключительно то, что : http://localhost:8080/

это мой код, который запускает окно(модальное) :

 createModal(type, params = null, event)
{
    this.browserWindow = this.createBrowserWindow()
    this.setURL(type, params)
    this.browserWindow.show()
    
    event.sender.send("modal-end", "yes")
}

createBrowserWindow()
{
    return new BrowserWindow({width: 650, height: 800, show: false, frame: true,
        webPreferences: {
            webSecurity: false,
            plugins: true,
            nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION)},
            enableRemoteModule: true,
            // contextIsolation: false
    });
}

    if (process.env.WEBPACK_DEV_SERVER_URL)
    {
        console.log('here modal url')
        console.log(process.env.WEBPACK_DEV_SERVER_URL   url)
        
        this.browserWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL   url)
        // this.browserWindow.loadURL("https://www.google.com");
        if (!process.env.IS_TEST) this.browserWindow.webContents.openDevTools()
    }
    else
    {
        createProtocol('app')
        this.browserWindow.loadURL('app://./index.html')
        // this.browserWindow.webContents.openDevTools()
        
    }
 

У вас есть идея, как создать новое окно electron в vue framework и режиме хэширования vue-маршрутизатора
, в котором отображается содержимое другого компонента vue, кроме первого смонтированного приложения компонента ?

Техническая информация :

• Электрон : 11.2.0
• Vuejs : 2.6.12
• dev env : Сервер разработки Webpack (webpack : 4.45.0)

У меня была та же проблема с новым электронным окном, содержащим все приложение, а не новую страницу, которую я указал в маршруте. Я не знаю, как у вас настроено приложение.vue, но в моем случае проблема заключалась в том, что страницу приложения нужно было изменить на просто содержащую <router-view></router-view> , а затем вам нужно переместить все остальное на другую страницу и направить маршрутизатор на эту страницу. Подобный этому:

Приложение.vue

 <template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: 'my-app'
  }
</script>
 

Main.js

 <template>
  <div id="main">
    <Header />  
    <ComponentOne />
    <ComponentTwo />   
  </div>
</template>

<script>
import Header from './Header.vue'
import ComponentOne from "./ComponentOne.vue"
import ComponentTwo from './ComponentTwo.vue'

export default {
  name: 'main',
  components: {
    Header, 
    ComponentOne,
    ComponentTwo
  }
}
</script>
 

Router.js

 import { createWebHashHistory, createRouter } from 'vue-router'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'main',
      component: require('@/components/Main.vue').default
    },
    {
      path: '/set',
      name: 'Settings',
      component: require('@/components/Settings.vue').default
    }  
  ]
})
export default router
 

В index.js, где бы вы ни настроили свои меню:

 {
  label: 'Settings',
  click() {         
    let win = new BrowserWindow({ 
      width: 800, 
      height: 600, 
      webPreferences: { 
          nodeIntegration: true,  
          contextIsolation: false
      }
    })
    win.on('close', function () { win = null })
    const setURL = process.env.NODE_ENV === 'development'
    ? 'http://localhost:9080/#/set'
    : `file://${__dirname}/index.html#/set`     
    win.loadURL(setURL)
    win.show()
  }
}
 

Примечание. Эти параметры веб-настроек являются проблемой безопасности для некоторых проектов, пожалуйста, проверьте: https://www.electronjs.org/docs/latest/tutorial/security