Блог

Главная - Вопросы по программированию - пустая страница vue electron builder

пустая страница vue electron builder

#vue.js #electron

#vue.js #электрон

Вопрос:

Как я пришел к проблеме:
 я настраиваю проект следующим образом: https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript / пока дело не дошло до части кодирования, там я добавил пользовательские материалы. Созданные компоненты и так далее. В serve все работает нормально, тогда я хочу его собрать.

Чего я ожидаю в качестве результата:
 приложение работает как в режиме обслуживания

Что я получил:
 пустая страница

Что я пытался исправить проблему:
 измените широкий диапазон 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"
  },

Комментарии:

1. Как ваш main.js как выглядит?

2. вид пустого: import { createApp, } from 'vue' import App from './App.vue' const vue = createApp(App); vue.mount('#app')

Ответ №1:

Итак, после многих часов борьбы, потому что я не мог открыть рабочую консоль, я нашел инструмент под названием Debugtron. После небольшой оптимизации он выдал ошибку: » createProtocol не определен «.

Автоматически созданный background.js пропустил черту:

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