Electron9+vue-cli3 разрабатывает кроссплатформенные настольные приложения

Эта статья относится к:zhuanlan.zhihu.com/p/75764907План этой статьи

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

Эта статья не включает в себя учебник по разработке Electron и vue, а только с целью реализации комбинации двух.Для более глубокого изучения Electron и vue посетите официальный сайт:

Electron: electronjs.org/

vue: cn.vuejs.org/

vue-cli: cli.vuejs.org/zh/

sass: www.sass.hk

Перед изучением этой статьи вы должны освоить следующие навыки:

HTML, CSS, JavaScript vue2.x дерзкий

электронные основы

※Примечание: "+" в начале каждой строки в области кода этой статьи означает добавление, "-" означает удаление, "M" означает изменение; "..." в коде означает исключение.

Посмотрите, чему можно научиться с помощью этого урока:

содержание

1 Создать проект

1.1 Используйте cnpm для ускорения загрузки

1.2 Почему бы не использовать SimulatedGREG/electron-vue

1.3 Установка/обновление vue-cli3

1.4 Создание проекта VUE

1.5 Автоматически установить электрон

1.6 Ручная установка электрона

1.7 Скомпилируйте и запустите приложение

2 элемента конфигурации

2.1 Настройте инструмент проверки формата кода ESLINT

2.2 Настройте более широкий плагин для форматирования файла конфигурации

2.3 Настройка vue

3 Пункт Основные настройки

3.1 Введение в процесс основного процесса и рендеринга

3.2 Размер окна приложения

3.3 Отменить междоменные ограничения

3.4 Отмена верхней строки меню

3.5 Установить значок окна приложения

3.6 Установите имя строки заголовка окна приложения

4 построить конечный продукт

4.1 Настройка приложения и значок установки

4.2 Приложение упаковки

4.3 Возможные проблемы при упаковке

4.4 Дополнительные конфигурации для упаковки

5 и некоторые проблемы с конфигурацией

5.1 Использование узловых модулей в процессе рендеринга

5.2 Отменить внешнюю границу

5.3 Вручную установите vue-devTools

5.4 Зарегистрируйте горячую клавишу для открытия devTools

5.5 Настройка области перетаскивания окна

5.6 анализ кода background.js

5.7 Процесс рендеринга вызывает главный модуль процесса

6 Перенесите проект vue на electronic-vue-demo

1 Создать проект

1.1 Используйте cnpm для ускорения загрузки

Использовать официальный образ npm напрямую в Китае очень медленно, здесь рекомендуется использовать образ Taobao NPM.

Используйте настроенный Taobao инструмент командной строки cnpm (поддержка сжатия gzip) вместо стандартного npm.

npm install -g cnpm --registry=https://registry.npm.taobao.org

Таким образом, вы можете использовать команду cnpm для установки модуля.

cnpm install [name]

Установите его после настройки, вы загрузите его с сервера Taobao по умолчанию.После просмотра списка конфигурации NPM это будет успешно.После успеха значение metrics-registry изменит адрес сервера Taobao.

npm config set registry  https://registry.npm.taobao.org

Вернитесь к адресу по умолчанию для загрузки, чтобы при запуске npm install [имя] он не загружался с зеркала Taobao.

npm config set registry https://registry.npmjs.org/

1.2 Почему бы не использовать SimulatedGREG/electron-vue

SimulatedGREG/electron-vue давно не обновлялся, и создаваемая им структура проекта отличается от vue-cli3. так что сдавайся

1.3 Установка/обновление vue-cli3

На момент написания этой статьи моя версия vue-cli3 — 3.12.1.

Выполните эту команду, чтобы проверить версию vue-cli

vue --version

Если версия ниже 3, сначала удалите

cnpm uninstall vue-cli -g

Затем установите vue-cli 3, указанная здесь версия совпадает с моей текущей версией, если вы не укажете ее напрямую.npm install -g @vue/cli Будет скачан последний vue-cli4, а конфигурация внутри отличается от 3, которую еще не изучал. Если читатель уже использует vue-cli4, просто пропустите его.

npm install -g @vue/cli@3.12.1

официальная ссылка vue-cli:cli.vuejs.org/zh/

1.4 Создание проекта vue

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

(Название проекта здесь установлено как electronic-vue-demo)

vue create electron-vue-demo

Появятся следующие параметры (если вы знакомы с этим шагом, можете пропустить этот раздел):

Vue CLI v3.12.1
? Please pick a preset: (Use arrow keys)
> default (babel, eslint)
  Manually select features  

Выберите «ВРУЧНУЮ ВЫБЕРИТЕ ФУНКЦИИ».

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing      

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n 

Выберите модуль предварительной обработки CSS, здесь мы используем «Sass/SCSS (с node-sass)».

> Sass/SCSS (with node-sass)

Выберите конфигурацию инструмента проверки формата кода ESLint, выберите «ESLint + Standard config», стандартную конфигурацию.

❯ ESLint + Standard config 

Строка при сохранении означает, что проверка формата выполняется при сохранении кода.

Lint and fix on commit означает автоматическое исправление формата при фиксации git.

Выберите здесь только «Lint on save».

>(*) Lint on save

Вот куда девать конфигурационные файлы babel, postcss, eslint?

В выделенных файлах конфигурации имеются в виду независимые файлы.

В package.json означает поместить в package.json

Здесь выберите «В package.json».

 In package.json 

Вы хотите сохранить эти настройки для будущих проектов? Выберите «Н».

Затем терпеливо дождитесь завершения установки проекта.

? Save this as a preset for future projects? (y/N) n  

1.5 Автоматическая установка электрона

※Примечание: для этого процесса может потребоваться научный доступ в Интернет.Поскольку загрузка напрямую с зарубежных зеркал выполняется медленно, ожидание может занять много времени. Если вы не очень уверены в скорости своего интернета, пропустите этот раздел и перейдите к разделу 1.6 для ручной установки.

Перейдите в корневой каталог проекта и выполните:

vue add electron-builder

Автоматическая установка зависит от этого плагина командной строки: Vue CLI Plugin Electron Builder, нет необходимости устанавливать его самостоятельно. Вам просто нужно открыть терминал в каталоге приложения, созданного с помощью Vue-CLI 3 или 4, и выполнить командуvue add electron-builder, Это оно.

Для Vue CLI Plugin Electron Builder вы можете обратиться к этому документу:Никола тоже вполне .GitHub.IO/v UE- обработка - пешком...

В процессе установки может зависнуть на этом шаге (я с этим не сталкивался):

node ./download-chromedriver.js

Неважно, давайте заставим это закончиться первым. Выполните vue add electronic-builder еще раз, и тогда вы сможете пройти его гладко.

Далее появятся параметры конфигурации:

? Choose Electron Version (Use arrow keys)
  ^7.0.0
  ^8.0.0
> ^9.0.0

Выберите электронную версию. Выберите "^9.0.0".

Затем терпеливо дождитесь завершения установки. Повторите этот шаг, если в середине есть прерывание из-за ошибки.

После завершения установки background.js будет автоматически сгенерирован в каталоге src, а package.json будет изменен.

※Примечание: из-за проблем с сетью, если в середине происходит прерывание и сбой, переустановка может быть завершена быстро, но на самом деле электрон может быть установлен не полностью. После выполнения вышеуказанных шагов рекомендуется удалить node_modules/ непосредственно в корневом каталоге проекта и выполнить установку cnpm для переустановки всех зависимых пакетов с внутреннего зеркала.

1.6 Ручная установка электрона

※Примечание. Если вы прошли операцию в главе 1.5, пропустите этот раздел напрямую.

Измените package.json и добавьте следующие 8 строк:

...
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
+    "electron:build": "vue-cli-service electron:build",
+   "electron:serve": "vue-cli-service electron:serve",
+    "postinstall": "electron-builder install-app-deps",
+    "postuninstall": "electron-builder install-app-deps"
  },
+  "main": "background.js",
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.12.0",
    "@vue/cli-plugin-eslint": "^3.12.0",
    "@vue/cli-service": "^3.12.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
 +  "electron": "^9.0.0",
 +  "electron-devtools-installer": "^3.1.0",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
 + "vue-cli-plugin-electron-builder": "^2.0.0-rc.5",
    "vue-template-compiler": "^2.6.10"
  },
 ...

Новый src/background.js

Создайте новый background.js в каталоге src и скопируйте следующий код:

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

Приведенный выше код генерируется после автоматической установки в разделе 1.5.

Установить зависимости

Выполните в корневом каталоге проекта для установки всех зависимых пакетов:

cnpm install

Если в процессе установки сообщается об ошибке: Ошибка: ошибка после установки, пожалуйста, удалите node_modules перед повторной попыткой Это можно игнорировать и это не повлияет на последующее использование. (я такого не встречал)

1.7 Скомпилируйте и запустите приложение

Выполните следующие команды, чтобы начать компиляцию приложения и запустить приложение среды разработки:

npm run electron:serve

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

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

Это связано с тем, что плагин vuejs devtools устанавливается по запросу. Для успешной установки требуется научный доступ в Интернет. Не имеет значения, если вы не можете работать в Интернете с научной точки зрения, он будет автоматически пропущен после терпеливого ожидания 5 неудачных запросов.

После успешной компиляции появится среда разработки приложений.

Поскольку его нельзя загрузить, и каждый раз, когда файл сохраняется для горячего обновления, он будет пытаться загрузить его снова, поэтому прокомментируйте соответствующий код здесь, а затем перейдите на официальный сайт vue, чтобы вручную загрузить vue-devtools и затем установите его.Подробнее см. 5.3.

// 网络原因插件下载会失败
// import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
...
// 下方相应的方法也删除

2 элемента конфигурации

2.1 Настройка инструмента проверки формата кода ESLint

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

Создайте .eslintrc.js в корневом каталоге проекта.

Обратите внимание, что перед именем файла стоит «.». Если eslintConfig также настроен в package.json, .eslintrc.js перезапишет конфигурацию в package.json. Здесь вы можете удалить конфигурацию eslintConfig в package.json.

Вставьте следующий код:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/essential', '@vue/standard'],
  rules: {
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 不检测语句末尾的分号
    semi: ['off', 'always'],
    // 强制缩进为2个空格
    indent: ['error', 2],
    // 关闭函数名称跟括号之间的空格检测
    'space-before-function-paren': 0,
    // 忽略大括号内的空格
    'object-curly-spacing': 0,
    // 当最后一个元素或属性与闭括号 ] 或 } 在 不同的行时，允许（但不要求）使用拖尾逗号；当在 同一行时，禁止使用拖尾逗号。
    'comma-dangle': ['error', 'only-multiline'],
    // 要求使用骆驼拼写法
    camelcase: [
      'error',
      {
        properties: 'never', // 不检查属性名称
        ignoreDestructuring: true, // 不检查解构标识符
      },
    ],
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
}

Выше приведена моя часто используемая конфигурация .eslintrc.js. Если у вас есть дополнительные требования к конфигурации, см.:cn.eslint.org/docs/rules

Отформатированный файл конфигурации по умолчанию имеет значение .editorconfig и настроен следующим образом:

[*.{js,jsx,ts,tsx,vue}]
indent_style = space   <--这里定义缩进类型是空格还是tab
indent_size = 2        <--这里需要与.eslintrc.js的indent对应
trim_trailing_whitespace = true
insert_final_newline = true

роль .editorconfig:

Плагин форматирования prettier сначала прочитает конфигурационные файлы в проекте, но в .editorconfig невозможно настроить строку без точки с запятой, поэтому для его настройки я использую конфигурационный файл .prettierrc, а функция та же, что и у . файл конфигурации редактора

2.2 Настройте более широкий плагин для форматирования файла конфигурации

Плагин форматирования, который я использую, красивее, если ридер не использует его, пожалуйста, настройте его в соответствии с официальной документацией. Удалите .editorconfig и создайте новый .prettierrc.js.

.prettierrc.js:

module.exports = {
  trailingComma: "es5", // ' es5': 在ES5中有效的尾随逗号（对象，数组等） 'all': 尾随逗号 尽可能（函数参数）
  tabWidth: 2,   // 每个制表符占用的空格数
  semi: false,  // 是否在每行末尾添加分号
  singleQuote: true, // 是否使用单引号
};

Выше приведена моя часто используемая конфигурация .prettierrc.js. Если у вас есть дополнительные требования к конфигурации, см.:prettier.io/docs/ en / con ...

.editorconfig, .prettierrc.js для IDE (я использую vscode) для автоматического форматирования кода .eslintrc.js для обнаружения ESlint

Если вы действительно не привыкли к eslint, вы можете отключить его:

// vue.config.js
lintOnSave: false

2.3 Настройка vue

Создайте vue.config.js в корневом каталоге проекта и вставьте следующий код:

const path = require('path');

function resolve (dir) {
  return path.join(__dirname, dir);
}

module.exports = {
  publicPath: './',
  devServer: {
    // can be overwritten by process.env.HOST
    host: '0.0.0.0',  
    port: 8080
  },
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('src', resolve('src'))
      .set('common', resolve('src/common'))
      .set('components', resolve('src/components'));
  }
};

devServer используется для установки службы среды разработки, здесь имеется в виду запуск веб-службы на локальном порту 8080.

В chainWebpack мы устанавливаем «псевдоним» для каталога проекта.В коде мы можем напрямую использовать «псевдоним» для доступа к ресурсам, избавляя от необходимости каждый раз вводить полный относительный путь.

※Примечание: ◉ Псевдонимы можно использовать прямо в js-коде, например: @/common/js/xxx.js эквивалентен src/common/js/xxx.js common/js/xxx.js эквивалентен src/common/js/xxx.js ◉ Чтобы использовать псевдоним в css или html, нужно добавить «~» перед псевдонимом, например: @import "~common/stylus/font.styl";

3 Пункт Основные настройки

3.1 Введение в основной процесс и процесс рендеринга

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

основной процесс

Процесс, в котором Electron запускает основной скрипт (background.js) в package.json, называется основным процессом. Сценарий, который запускается в основном процессе, представляет пользовательский интерфейс, создавая веб-страницы. Приложение Electron всегда имеет один и только один главный процесс.

процесс рендеринга

Поскольку Electron использует Chromium для отображения веб-страниц, также используется многопроцессорная архитектура Chromium. Каждая веб-страница в Electron работает в собственном процессе рендеринга.

В обычных браузерах веб-страницы обычно работают в изолированной среде, и им не разрешается касаться собственных ресурсов. Однако пользователи Electron могут выполнять некоторые низкоуровневые взаимодействия с операционной системой на странице с поддержкой Node.js API.

Связь между основным процессом и процессом рендеринга

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

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

Подробности смотрите в официальной документации:электрон JS.org/docs/tutor i…

3.2 Размер окна приложения

Измените background.js:

const win = new BrowserWindow({
M    width: 1200,
M    height: 620,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
    }
  })

установить полноэкранный режим

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

  const win = new BrowserWindow({
    width: 1200,
    height: 620,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
 +    fullscreen: true,
 +    skipTaskbar: false,
 +    fullscreenable: true,
 +    simpleFullscreen: true,
    },
      
 +    // 经在 win10 系统测试，此方法全屏时不能挡住下方任务栏
 +    // win.maximize()	
 +    // 此方法可以挡住下方任务栏
 +    win.setFullScreen(true)
  });

Ширина набора после другого задания не удается полностью экран

3.3 Отменить междоменные ограничения

Измените background.js:

const win = new BrowserWindow({
    width: 1200,
    height: 620,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+     webSecurity: false,
    }
  })

3.4 Отмена верхней строки меню

  // 去掉窗口顶部菜单
  win.setMenu(null);

3.5 Установите значок окна APP (система win10, которую я использую, не действует, она вступит в силу после упаковки)

окна: app.ico минимальный размер: 256x256 macOS: app.png или app.icns Минимальный размер: 512x512 (используется позже в главе 4.1)

Поместите файл значка в каталог public/, структура проекта выглядит следующим образом:

|- /dist_electron
  （略）
|- /public
   |- app.icns  <-- 本教程暂时未使用icns
   |- app.ico
   |- app.png
   |- favicon.ico
   |- index.html
|- /src
  （略）

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

Измените background.js, чтобы позволить окну APP применить значок:

  ...
+  const path = require('path')
  ...
  const win = new BrowserWindow({
    width: 1200,
    height: 620,
+   icon: path.join(__static, 'app.ico'), // 任务栏图标 及 任务栏预览图标,注意图标放在public目录中
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      webSecurity: false,
    }
  });
  ...

Здесь ${__static} соответствует общедоступному каталогу

3.6 Установите имя строки заголовка окна приложения

Просто измените файл electronic-vue-demo в файле public/index.html (в моем проекте внешняя граница отменена, и заголовок не виден)

4 построить конечный продукт

Здесь мы интегрировали инструмент для создания электронов, а официальную документацию можно найти здесь:GitHub.com/electron-США…

4.1 Установите имя и значок приложения

Измените vue.config.js и добавьте следующий код:

  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,  // 渲染进程可以使用node模块
      builderOptions: {
        win: {
          icon: "./public/app.ico"
        },
        mac: {
          icon: "./public/app.png"
        },
        productName: "AppDemo"
      }
    }
  }

Здесь настраивается значок упакованного приложения и имя приложения, устанавливаемого на рабочий стол.

4.2 Упаковка приложения

Выполните следующую команду для сборки проекта:

npm run electron:build

Наконец, готовый продукт создается в каталоге dist_electron.

4.3 Возможные проблемы при упаковке

Из-за сетевых причин содержимое двух файлов на рисунке не может быть загружено.Перейдите на github для загрузки по соответствующему пути к файлу в командной строке, а затем поместите его в папку.

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

Связь:disk.baidu.com/yes/15V7EU ТС-поток…

Код извлечения: gl03

После его размещения внутренняя часть папки выглядит так:

Есть две версии, потому что я использовал electronic-vue для создания проекта раньше, и версия этой зависимости относительно низкая.

4.4 Дополнительные конфигурации для упаковки

Вот некоторые дополнительные конфигурации, чтобы типизированный пакет мог настроить путь установки и т. д. Дополнительные справочные документы по конфигурации:

Справочная документация:ООО, ООО .elctron.build / config u как ati ...

vue.config.js в:

  ...
  // 引入package.json 以获取文件中的项目信息
  const PACKAGE = require('./package.json')
  let config = {
      productName: PACKAGE.name,
      version: PACKAGE.version,
  }
  ...
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true, // 渲染进程可以使用node模块
      builderOptions: {
        asar: false,  
        productName: `${config.productName}`, // 项目名,这也是生成的exe文件的前缀名
        appId: 'com.electron.template', // 应用程序id
        copyright: 'Copyright © template',  // 应用程序版权行
        directories: {
          output: 'dist_electron',  // 打包输出的目录，相对于项目根路径
        },
        win: {
          legalTrademarks: 'Copyright © template',  // 商标注册
          publisherName: 'electron',  // 发行者名称，与代码签名证书中的名称完全相同
          requestedExecutionLevel: 'highestAvailable',  // 应用程序请求执行的安全级别。
          target: [
            {
              target: 'nsis', // 目标包类型
              arch: ['ia32'], // 属于X86体系结bai构的du32位版本
            },
          ],
          // 没有配置 nsis 的时候的安装包名，此配置项会被 nsis 覆盖
          // artifactName: `${config.productName}.exe`,  
          icon: './public/app.ico', // 图标路径，安装包和免安装程序都会应用
        },
        mac: {
          identity: 'com.electron.templat',
          target: ['dmg'],
          // artifactName: `${config.productName}.dmg`,
          icon: './public/app.png',
        },
        dmg: {
          title: `${config.productName}`,
          // artifactName: `${config.productName}.dmg`,
          icon: './public/app.png',
        },
        nsis: {
          // 创建一键安装程序还是辅助安装程序
          oneClick: false,
          // 是否允许用户更改安装目录。
          allowToChangeInstallationDirectory: true,
          // 是否为辅助安装程序显示安装模式安装程序页(选择每台计算机或每用户)。或者是否总是按所有用户(每台机器)安装
          perMachine: true,
          // 允许申请提升。如果为false，用户将不得不以提升的权限重启安装程序
          allowElevation: true,
          // 打出的安装包名称，默认 ${productName} Setup ${version}.${ext}，${productName} 对应productName 或 package.json 中的name， ${version}对应 package.json 中的 version 
          artifactName: `${config.productName}-安装包-V${config.version}.exe`,
          // 完成后是否运行已安装的应用程序。对于辅助安装程序，相应的复选框将被删除
          runAfterFinish: true,
          // 用于所有快捷方式的名称。默认为应用程序名称，即 productName 的值，如果 productName 没有设置，则默认是 package.json 中的 name，如果name 也没有设置，将报错
          shortcutName: `${config.productName}`,
        },
      },
    },
  },

5 Некоторые конфигурации и проблемы

5.1 Использование узловых модулей в процессе рендеринга

// vue.config.js
module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

После настройки в vue.config.js значение process.env.ELECTRON_NODE_INTEGRATION равно true, что соответствует background.js.

nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,

5.2 Отменить внешнюю границу

  const win = new BrowserWindow({
    width: 1200,
    height: 620,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      webSecurity: false,
      // eslint-disable-next-line no-undef
      icon: path.join(__static, 'icon.png'),
      
    },
 +   frame: false,
  });

Больше ссылок:Woohoo.book stack.can/read/elect R…

5.3 Вручную установите vue-devTools

Автоматическая загрузка не удалась из-за сетевых причин.Здесь сначала загрузите vue-devTools вручную и поместите его в папку dist_electron, потому что __dirname использует его в качестве базового пути.

адрес загрузки vue-devTools:GitHub.com/v UE JS/v UE-оф…

Используйте метод session.defaultSession.loadExtension для загрузки подключаемого модуля, обратите внимание на то, что он загружается только в среде разработки.

app.on("ready", async () => {
  // 开发环境下才加载vue-devtools
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    loadVueDevTools()
  }
  createWindow();
});

// 加载 vue 开发者工具
function loadVueDevTools() {
  session.defaultSession
    .loadExtension(path.join(__dirname, "./devTools/vue-devtools"))
    .then(res => {
      console.log("Vue Devtools loaded successfully");
    })
    .catch(err => {
      console.error("Vue Devtools failed to install:", err.toString());
    });
}

5.4 Зарегистрируйте горячую клавишу для открытия devTools

После успешной настройки вы можете переключиться в режим разработчика, нажав CommandOrControl+Shift+i.

В Windows нажмите Ctrl+Shift+i, чтобы переключить devTools

В macOS нажмите Commond+Shift+i, чтобы переключить devTools

Поскольку F12 — это клавиша быстрого доступа, зарезервированная системой, здесь нет необходимости регистрироваться с помощью F12.

app.on("ready", async () => {
  // 开发环境下才加载vue-devtools
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    loadVueDevTools()
    registerToggleDevTools()
  }
  createWindow();
});

// 注册快捷键切换打开开发者工具
function registerToggleDevTools() {
   globalShortcut.register("CommandOrControl+Shift+i", function() {
    BrowserWindow.getFocusedWindow().webContents.toggleDevTools();
  });
}

5.5 Настройка области перетаскивания окна

После установки этого свойства для указанного элемента щелкните, чтобы перетащить окно

-webkit-app-region: drag;

Использование внутри перетаскиваемой области-webkit-app-region: no-dragНекоторые области могут быть исключены. Обратите внимание, что в настоящее время поддерживаются только прямоугольные формы

Выбор текста

В безрамочном окне перетаскивание может конфликтовать с выделением текста. Например, когда вы перетаскиваете строку заголовка, вы можете случайно выделить текст в строке заголовка. Чтобы предотвратить это, вам нужно отключить выделение текста в доступной области, как показано ниже:

.titlebar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

5.6 анализ кода background.js

5.6.1 Переменные

• process.env.NODE_ENV

  Среда разработки — это разработка

  Производственная среда - производство

• process.env.ELECTRON_NODE_INTEGRATION

  Соответствующие атрибуту NodeIntegration в Vue.config.js

  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,  // 渲染进程可以使用node模块
      builderOptions: {
        win: {
          icon: "./public/app.ico"
        },
        mac: {
          icon: "./public/app.png"
        },
        productName: "AppDemo"
      }
    }
  }

• process.env.WEBPACK_DEV_SERVER_URL

  В соответствии с URL-адресом локальной службы запуска, мой:http://localhost:8080

• __static

  Соответствует абсолютному пути общедоступного каталога проекта.

5.6.2 Методы

• createProtocol("app")

  Из import { createProtocol } из "vue-cli-plugin-electron-builder/lib" следующим образом:

export default scheme => {
  protocol.registerBufferProtocol(
    scheme,
    (request, respond) => {
      let pathName = new URL(request.url).pathname
      pathName = decodeURI(pathName) // Needed in case URL contains spaces

      readFile(path.join(__dirname, pathName), (error, data) => {
        if (error) {
          console.error(`Failed to read ${pathName} on ${scheme} protocol`, error)
        }
        const extension = path.extname(pathName).toLowerCase()
        let mimeType = ''

        if (extension === '.js') {
          mimeType = 'text/javascript'
        } else if (extension === '.html') {
          mimeType = 'text/html'
        } else if (extension === '.css') {
          mimeType = 'text/css'
        } else if (extension === '.svg' || extension === '.svgz') {
          mimeType = 'image/svg+xml'
        } else if (extension === '.json') {
          mimeType = 'application/json'
        }

        respond({ mimeType, data })
      })
    },
    error => {
      if (error) {
        console.error(`Failed to register ${scheme} protocol`, error)
      }
    }
  )
}

Про протокольный модуль я пока не разобрался~

5.7 Процесс рендеринга вызывает главный модуль процесса

5.7.1 Введение в удаленный модуль

Удаленный модуль обеспечивает простой способ межпроцессного взаимодействия (IPC) между процессом визуализации (веб-страницей) и основным процессом. дорожка. В Electron модули, связанные с графическим интерфейсом (такие как диалог, меню и т. д.), существуют только в основном процессе, а не в процессе рендеринга. Чтобы иметь возможность использовать их из процесса визуализации, необходимо использовать модуль ipc для отправки межпроцессных сообщений в основной процесс. С помощью удаленного модуля можно вызывать методы основного объекта процесса без явной отправки межпроцессных сообщений.

Удаленный модуль отключен по умолчанию, и его необходимо включить в BrowserWindow основного процесса, установив для параметра enableRemoteModule значение true.

const win = new BrowserWindow({
    width: 1200,
    height: 620,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      webSecurity: false,
      // eslint-disable-next-line no-undef
      icon: path.join(__static, 'icon.png'),
 +    enableRemoteModule: true,
    },
        frame: false,
  });

5.7.2 Пример использования

Пример: создание окна браузера из процесса визуализации

const { BrowserWindow } = require('electron').remote
let win = new BrowserWindow({ width: 800, height: 600 })
win.loadURL('https://github.com')

6 Перенесите проект vue на electronic-vue-demo

Мой Vuue Project создан VUE-CLI3, и содержимое всей папки SRC трансплантировано в папку SRC электронно-Vuue-Demo, потому что мой проект зависит от Element-Ui и Axios, загрузите плагин:

 cnpm i -S element-ui axios

Затем запустите: npm run electronic: подача подбежала, польщена ~!