Question

我有一个Electron app + 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>

Answer 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
})

Electron + Vue（SPA）：不允许加载本地资源：file：///app/src/Products.vue

1 个答案: