Блог

Я пытаюсь создать приложения для Windows, используя Electron и Vue. Я хочу отправить приложение в трей и показать значок, чтобы снова развернуть его при нажатии. Это прекрасно работает в DEV, но когда я создаю приложение, значок в трее не работает. Приложение, которое оно выполняет, но при сворачивании трей не отображается, и нет возможности открыть его снова (необходимо завершить процесс).

Это код, который я пытаюсь использовать:

 app.on("ready", async () => {
  if (isDevelopment amp;amp; !process.env.IS_TEST) {
    try {
      await installExtension(VUEJS_DEVTOOLS);
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
  createTray()
});

const createTray = () => {
  const tray = new Tray(resolve(process.resourcesPath, '\resources\homeico.ico'))

  const contextMenu = Menu.buildFromTemplate([
    {
        label: 'Show App', click: function () {
            app.show()
        }
    },
    {
        label: 'Quit', click: function () {
            app.isQuiting = true
            app.quit()
        }
    }
  ])
  tray.setToolTip('This is my application.')
  tray.setContextMenu(contextMenu)

  tray.on('click', () => {
      console.log('clicked')
  })
}
 

И в моем vue.config.js:

 pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {     
        "extraResources": [
          {
            "from": "extraResources",
            "to": "resources",
            "filter": [
              "**/*"
            ]
          }
        ]
      }      
    },
  },
 

Строка resolve(process.resourcesPath, ‘resourceshomeico.ico’) указывает на существующий файл, я печатаю этот маршрут в приложении и могу открыть его в проводнике Windows, но когда я хочу показать изображение в приложении, я вижу следующую ошибку в инструменты разработки:

Не разрешено загружать локальный ресурс: file:///C:/Users/mysUser/AppData/Local/Programs/business-config-tool/resources/ресурсы/homeico.ico

Путь доступен, но не в приложении. Как правильно настроить путь к значку? есть другой путь, который я могу настроить для активов? Я также пробовал использовать __dirname и другие форматы значков (ico, png ..)

Спасибо.

Я столкнулся с той же проблемой. Я искал решение часами и, наконец, нашел его.

Это решение сделано для приложения с использованием electron-vue (я лично использовал этот плагин Vue Cli electron). И я протестировал его только в Windows.

Лоток должен быть инициализирован путем к значку, который должен отличаться от того, используете ли вы встроенную версию своего приложения ( yarn electron:build ) или обслуживаете свое приложение ( yarn electron:serve ).

Я использую функцию, которую я вызвал isServeMode , которая в основном сообщает мне, использую ли я режим обслуживания или режим buid. Вот как выглядит функция :

 // utils.js file
const isServeMode = () => {
    return process.env.WEBPACK_DEV_SERVER_URL
}
 

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

Затем поместите свой значок в трее в общую папку, он может не работать, если вы поместите значок в src/assets папку, поскольку мы должны получить к нему доступ из среды узла, а не из Vue. В моем случае я вставил туда свою иконку public/tray/icon.png .

Наконец, мы можем использовать электронный лоток с электронным vue следующим образом

 import { Tray } from "electron"
import path from "path"
import { isServeMode } from "./utils" // Path depends on where you wrote your function

// Some Electron code...

let tray

createTray = () => {
  const iconPath = isServeMode() 
    ? path.join(__dirname, "/bundled/tray/icon.png")
    : path.join(__dirname, "/tray/icon.png")

  tray = new Tray(iconPath)
}
 

Скоро я выпущу новую версию моего приложения Unlighter, которое представляет собой приложение electron-vue, которое будет включать пример лотка. Не стесняйтесь взглянуть на этот «пример приложения из реального мира», если вам интересно.