Url 电子+；Vue（SPA）：不允许加载本地资源：file:///app/src/Products.vue

我有一个电子应用程序+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>

父窗口。。。
+添加产品
导出默认值{
方法：{
添加：函数（）{
const remote=require（'electron'）。remote
const BrowserWindow=remote.BrowserWindow
让我们赢
win=新浏览器窗口({
身高：600，
宽度：800
})
loadURL（`file://${\uuu dirname}/app/src/Products.vue`）
win.openDevTools（）
}
}
}

在您的情况下，必须从主进程创建子窗口，以启动包含本地资源的子窗口。您可以为此使用

ipc

（ipcMain，ipcRenderer）

比如说,

在主要过程中：

函数createChildWindow（有效负载）{
let child=new BrowserWindow（{parent:mainWindow
});
loadURL（url.format({
路径名：path.join（uu dirname，'child.html'），
协议：“文件：”，
斜杠：对，
}));
child.once（'ready-to-show'，（）=>{
child.show（）
});
}
ipcMain.on（'asynchronous-message'，（事件，参数）=>{
console.log（arg）//打印“ping”
createChildWindow（arg）；
});

渲染器进程中（网页）：

const{ipcRenderer}=window.require（'electron'））
异步启动ChildWindow（）{
发送（'asynchronous-message'，''）；
}

您也可以编写这样的自定义事件

//渲染器进程
调用（'some-name'，someArgument）。然后（（结果）=>{
// ...
})
//主要过程
ipcMain.handle（'some-name'，异步（事件，someArgument）=>{
const result=等待doSomeWork（someArgument）
返回结果
})

如果您分享了您已经尝试过的内容（和/或链接到其他StackOverflow问题，您尝试过这些问题的方法），这样人们就不会提出您已经尝试过的建议，可能会有所帮助。