Мой проект был специально связан с Vue, но этот подход к отладке будет работать и с другими фреймворками.

Для школьного проекта Школа Тьюринга мы с партнером создаем базовое приложение для заметок. Ничего сложного, но и неплохо для изучения Vue, sqlite, knexJs и ElectronJS.

Доступно в виде приложения на компьютере с собственным простым значком, создающим локальную базу данных sqlite3 в пакете для каждого пользователя. Чтобы перейти от Electron / VueJs к этому моменту, требовался электронный упаковщик, но упаковщик возвращал производственный пакет, который либо:

  1. открыть и показать пустой экран или
  2. ошибки открытого приглашения (тем более без моего логотипа), указывающие на то, что модули не найдены, или ошибки ссылки на путь к файлу.

Первым шагом к решению этой проблемы было спросить Стива Кинни, который руководит нашей клиентской программой в Turing. Он помогал мне отлаживать и попутно предоставил эти указатели.

Вы должны иметь возможность видеть, какие ошибки возвращаются, поэтому сначала включите инструменты разработчика для производственной сборки. Как только вы определите проблему, переупаковывайте ее без нее. В вашем основном электронном файле, если вы еще этого не сделали (у большинства людей он есть только в разработке с оператором if), добавьте строку, выделенную жирным шрифтом, в свой loadURL где-нибудь, чтобы открыть эти инструменты разработчика.

function createWindow () {
  mainWindow = new BrowserWindow({
    height: 600,
    width: 800,
    minWidth: 600,
    minHeight: 500,
    titleBarStyle: 'hidden-inset',
    title: 'Notes',
    show: true,
  });
mainWindow.loadURL(config.url);
  mainWindow.openDevTools();

Теперь перезапустите свой электронный упаковщик. Снова откройте вновь созданный пакет и начните считывать ошибки. Я начинаю видеть, что файлы не найдены, ошибки, ошибки не найдены модули и ошибки базы данных, которые ссылаются на неправильные пути. Я не мог понять, как заставить работать эти пути, независимо от того, где находится этот пакет, потому что, насколько приложение знало, он находится в корне (компьютера, а не каталога).

process.cwd() //  this returns this file path '/'
__dirname     //  this returns this file path '/'

Это нехорошо. Как мне искать модули и файлы, если эта штука даже не знает, где они?

Более того, мы по-прежнему хотим использовать эти инструменты для разработки, поскольку их использование с path - удобный способ безболезненно ссылаться на файлы. Чтобы реализовать эту логику, мы добавили простой троичный элемент, присвоенный переменной для определения пути к каталогу.

//create a function which returns true or false to recognize a development environment
const isDev = () => process.env.NODE_ENV === 'development';
//use that function to either use the development path OR the production prefix to your file location
const directory = isDev() ? process.cwd().concat('/app') : process.env.APP_PATH;
//This requires an environment variable, which we will get to in a moment.
//require files joining that directory variable with the location within your package of files
const mainProcess = remote.require(path.join(directory, '/electron.js'));
const database = remote.require(path.join(directory, '/database.js'));

Это решило нашу проблему разработки / производства, но исходная проблема заключалась в том, что __dirname вернул корневой каталог компьютера, который не работает для производственного пакета.

К счастью, я думаю, что кто-то из компании Electron знал, что это может быть проблемой, и сделал нам изящный метод, который мы можем использовать в нашем электронном приложении.

process.env['APP_PATH'] = app.getAppPath();

Мы можем использовать вывод, который является местоположением запущенного приложения, и установить переменную среды процесса. Использование переменных среды процесса помогает нам избежать проблем со ссылками на файлы. Я поместил приведенный выше фрагмент в конец моего основного электронного файла.

Если вы все еще получаете ошибки, начните проверять пути к файлам. Это неприятно, но иногда бывает лучше найти файлы самостоятельно. Если вы не можете найти файл, компьютер, черт возьми, не сможет его найти.

Мне все еще нужно было решить еще одну проблему, но на этом мое элегантное решение заканчивается, а неуклюжие позволяет просто получить это чертовски рабочее решение.

Я также использовал интерфейс командной строки, в котором был пакет, обертывающий пакет, поэтому у меня было две отдельные папки модулей узлов. Шаблон, который сработал для меня, работал с электронным упаковщиком с - asar = false. Откройте производственное приложение, щелкнув правой кнопкой мыши, найдите папку приложения, скрытую в ресурсах (путь от ваших ошибок, поможет вам), и скопируйте папку модулей внешнего узла во внутреннее приложение. Это была единственная папка модулей узлов в этом пакете.

Это также увеличило мой уже раздутый пакет 100 МБ до смешных 500 МБ, но это проблема на другой день.

Ссылка на проект github: https://github.com/kerrd89/electron-project