1

我有一个用于生根的 Electron 应用程序 + Vue。我在将内容加载到新打开的窗口时遇到问题。该窗口是从 Vue 组件启动的。当它打开时，我得到一个空白窗口，并且：

不允许加载本地资源：file:///app/src/Products.vue

我尝试了stackoverflow上提到的不同方法，但错误仍然存​​在。

<style scoped>
</style>

<template>
  <div class="container-fluid">
    Parent window...
    <button type="submit" class="btn btn-primary" v-on:click="add">+ Add Product</button>
  </div>
</template>


<script>
  export default {
    methods: {
      add: function () {
        const remote = require('electron').remote
        const BrowserWindow = remote.BrowserWindow
        let win
        win = new BrowserWindow({
          height: 600,
          width: 800
        })
        win.loadURL(`file://${__dirname}/app/src/Products.vue`)
        win.openDevTools()
      }
    }
  }
</script>
4

1 回答 1

1

在您的情况下，必须从主进程创建子窗口才能在 Electron 中启动具有本地资源的子窗口。您可以为此使用ipc(ipcMain, ipcRenderer)。

例如，

在主要过程中：

function createChildWindow(payload) {
  let child = new BrowserWindow({ parent :mainWindow  
  });

  child.loadURL(url.format({
    pathname: path.join(__dirname, 'child.html'),
    protocol: 'file:',
    slashes: true,
  }));
  child.once('ready-to-show', () => {
    child.show()
  });
}

ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping" 
  createChildWindow(arg);
});

在渲染器进程（网页）中：

const {ipcRenderer}  = window.require('electron')
async launchChildWindow(){
 ipcRenderer.send('asynchronous-message', '<payload>');
}

你也可以像这样编写自定义事件，

// Renderer process
ipcRenderer.invoke('some-name', someArgument).then((result) => {
  // ...
})

// Main process
ipcMain.handle('some-name', async (event, someArgument) => {
  const result = await doSomeWork(someArgument)
  return result
})
于 2019-12-23T11:01:11.303 回答