Electron+Vite быстро создает настольные приложения Vue3

Я участвую в "Наггетс·Стартовый план"

предисловие

Учитывая постоянную популярность Vite , его должны использовать все. В последнее время компании необходимо разработать настольный видеоплеер, в котором участвует Electron , который может помочь нам быстро разработать приложение для настольного компьютера. Вот что я построил: Базовая полка , основной стек технологийVue3 vite Electron

создать приложение

Используем для Viteсборки Vue3проекта прямую однострочную команду, я выбираю здесь yarn, конечно, npm pnpmтакие все возможны, видать сами привыкли

# yarn yarn create vite electron-demo --template vue

Войдите в проект, чтобы загрузить зависимости и запустить проект.

// 进入项目
cd electron-demo

// 下载依赖
yarn

// 运行项目
yarn dev

Они относительно знакомы! Неудивительно, что проект успешно стартовал

Скачать Электрон

Главное блюдо здесь, давайте начнем путешествие по яме

yarn add electron

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

pnpm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
pnpm config set electron_builder_binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

конфигурация

Изменить package.json

1. Сначала создайте electronic/index.js в корневом каталоге.

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

// electron / index.js
import { app, BrowserWindow } from 'electron';
import { join } from 'path'

const createdWindow = () => {
  const win = new BrowserWindow({
    width:900,
    height:600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,
    }
  })
}


app.whenReady().then(createdWindow)

2. vite-plugin-electronЗапись файла, которая настраивает подключаемый модуль для упаковки и компиляции.

yarn add vite-plugin-electron -D

Откройте vite.config.js, чтобы импортировать конфигурацию выполнения, и напишите файл входа, который является основным файлом потока, который мы только что создали.

import { app, BrowserWindow } from 'electron';
import { join } from 'path'

const createdWindow = () => {
  const win = new BrowserWindow({
    width:900,
    height:600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,
    }
  })

  if(process.env.VITE_DEV_SERVER_URL){
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  }else {
    win.loadFile(join(__dirname,'index.html'))
  }
}


app.whenReady().then(createdWindow)

3. запустить проектyarn dev

Мы видим, что добавилась новая папка, вот скомпилированный код основного потока, и будет ошибка

Поскольку electronосновным процессом является используемая среда node, и по умолчанию Node.js использует спецификацию модуля CommonJS, а importинструкция принадлежит спецификации модуля ECMAScript, и они несовместимы. Поэтому вам необходимо использовать dist-electron/main.jsв качестве mainатрибута входной файл, скомпилированный в спецификацию CommonJS, иначе будет сообщено о синтаксической ошибке es6.

В это время мы удалим packjsonполе typeи изменим файл ввода наdist-electron/main.js

{
  "name": "electorn-demo",
  "private": true,
  "version": "0.0.0",
  "main": "dist-electron/index.js",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "electron": "^25.1.0",
    "vite": "^4.3.9",
    "vite-plugin-electron": "^0.11.2"
  }
}

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

4. Завершить искаженные символы

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

Решение

chcp 65001Это команда в системе Windows, которая используется для установки кодовой страницы консоли в кодировку UTF-8. По умолчанию консоль Windows использует GBK или другие локальные кодировки, что может привести к искажению символов при выводе символов, отличных от ASCII, таких как китайский, в консоль. Используйте chcp 65001команду , чтобы установить кодовую страницу консоли в кодировку UTF-8, чтобы символы, отличные от ASCII, такие как китайский язык, могли отображаться правильно.

Упаковка Электрон

нужно установитьelectron-builder cross-env

yarn add electron-builder cross-env -D

Измените файл packjsons

"build": "vite build && electron-builder"

Измените electronic/index.js, чтобы упакованное программное обеспечение можно было загрузить правильно.

import { app, BrowserWindow } from 'electron';
import { join } from 'path'

const createdWindow = () => {
  const win = new BrowserWindow({
    width:900,
    height:600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation:false,
    }
  })

  if(process.env.NODE_ENV !='development'){
    win.loadFile(join(__dirname,'../dist/index.html'))
  }else {
    win.loadURL(process.env.VITE_DEV_SERVER_URL)
  }
}


app.whenReady().then(createdWindow)

Последний шаг: скопируйте следующий код в файл packjson.json.

"build": {
    "appId": "com.my-website.my-app",
    "productName": "MyApp",
    "copyright": "Copyright © 2021 kuari",
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "dist-electron/**/*"
    ],
    "directories": {
      "buildResources": "assets",
      "output": "release/"
    }
  }

достижение

Execute yarn build, вы увидите, что установленный нами файл добавляется в корневую директорию файла release, и наше программное обеспечение хранится в нем.После нажатия Установить большое объявление становится

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

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