vue电子生成器空白页答案

【问题标题】：vue electron builder blank pagevue电子生成器空白页
【发布时间】：2020-10-15 00:12:52
【问题描述】：

我是如何解决这个问题的：
我设置了一个这样的项目： https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript/ 直到它出现在编码部分，我在那里添加了自定义的东西。创建组件等。在服务中一切正常，然后我想构建它。

我期望的结果：
应用在服务模式下工作

我得到了什么：
空白页

我尝试解决的问题：
更改各种路径 URL，例如：

 win.loadURL(url.format({
            pathname: path.join(__dirname, '../public/index.html'),
            protocol: 'file:',
            slashes: true
})) // with different links passing different index.html files (raw vue build, electron build and public)

win.loadURL('app://./index.html')

win.loadURL(`file://${__dirname}/../public/index.html`) // aswell as the variation without file protocoll

问题是我没有得到错误。如果我在构建过程结束时通过菜单栏打开开发人员控制台，我必须重新加载控制台附加到程序的页面，当我按下重新加载时，什么也没有发生。

有什么更进一步的建议吗？

编辑：这是我的依赖：

 "dependencies": {
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.0",
    "electron-icon-builder": "^1.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
    "webpack-cli": "^4.0.0"
  },

【问题讨论】：

你的 main.js 是什么样子的？
有点空白：import { createApp, } from 'vue' import App from './App.vue' const vue = createApp(App); vue.mount('#app')

标签： vue.js electron

【解决方案1】：

因此，由于无法打开工作控制台而苦苦挣扎了数小时后，我找到了一个名为 Debugtron 的工具。经过一番优化，它抛出了错误：“createProtocol is undefined”。

自动生成的 background.js 漏掉了一行：

import createProtocol from "vue-cli-plugin-electron-builder/lib/createProtocol";

【讨论】：