ホームページ > 記事 > ウェブフロントエンド > vue3+ts+vite+electron を使用してデスクトップ アプリケーションを構築する方法
vite: ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1
yarn create vite@ vuets_electron --template vue-ts cd ./vuets_electron yarn install && yarn dev
順番Electron を正常にインストールできるようにするには、
vuets_electron
のルート ディレクトリに.npmrc
を作成し、electron のイメージ ソース
# /.npmrc ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
を設定します。 Electron パッケージに関するインストール
# electron yarn add -D electron # electron-builder 用于打包 yarn add -D electron-builder # electron-devtools-installer yarn add -D electron-devtools-installer # 为了保证后续步骤,这里在安装一个concurrently, yarn add concurrently
Electron メインプロセスファイル main.ts を作成: /src/main/main.ts
const { app, BrowserWindow } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, // webPreferences: { // preload: path.join(__dirname, 'preload.js') // } }) // 加载vue url视本地环境而定,如http://localhost:5173 win.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })
起動コマンドの調整: package.json
1 vue 起動:yarn dev
2 Electron を起動するには? Electron の公式ドキュメントから、Electron が URL をロードできることが明確にわかります。 Electronを起動する前にvueを起動して、vueのアクセス入口をelectronに接続すればよいのですが、同時にelectronを起動すれば十分ではないでしょうか~
3 エントリファイルの設定を忘れずに~~~
{ "name": "vuets_electron", "private": true, "version": "1.0.0", // +++ 增加入口 "main": "src/main/main.js", // +++ "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", // +++ 设置electron开发启动命令 "electron:dev": "concurrently \"yarn dev\" \"electron .\"" // +++ } // ... // 其它配置 }
この時点で、yarn electric:dev
3 完全なインストール パッケージを取得できるように Electron をパッケージ化します
# package.json { "name": "vuets_electron", "private": true, "version": "1.0.0", "main": "src/main/main.js", // +++ "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "electron:dev": "concurrently \"yarn dev\" \"electron .\"", // +++ 设置electron打包命令 "electron:build": "yarn build && electron-builder" // +++ } // ... // 其它配置 // +++ 打包相关设置 "build": { "appId": "ink.bennent_g.demo", "directories": { "output": "output" }, // 其它的build相关设置,可参考 electron-builder官方文档 } }
vite.config.ts 調整
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), ], // +++ base: './', // +++ server: { port: 3000 } // ... })src/main/main.ts 調整
const { app, BrowserWindow } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, // webPreferences: { // preload: path.join(__dirname, 'preload.js') // } }) // +++ 开发环境与打包后加载vue入口文件有所区别 // and load then index.html or the app if(process.env.npm_lifecycle_event === 'electron:dev') { win.loadURL('http://localhost:3000') win.webContents.openDevTools() } else { win.loadFile('dist/index.html') } // +++ } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })5. プロジェクトディレクトリの並び替え
以下は私のディレクトリ構造は、
vuets_electron // 项目名称 │ —— node_modules │ —— dist // vue打包目录 │ —— output // electron打包目录 │ —— public │ —— .npmrc │ —— package.json │ —— vite.config.ts │ —— tsconfig.json │ └─── src // 开发相关目录 │ │ main.ts // vue默认入口文件 │ └───assets // 静态资源目录 │ │ ... │ └───main // electron主进程目录 │ │ main.ts │ └───render // 渲染进程目录即vue相关目录结构 │ │ router │ │ views │ │ ...
を参照してください。この時点で、Electron 開発フレームワークは完成しており、喜んでコードを書くことができます~
3。パッケージングのホームページが空白でロードされる問題 (補足)
が表示されます。 Electron はhash
モードのみをサポートします。
createWebHistory()Create ルートを使用する場合は、
createWebHashHistory()<pre class="brush:js;">const router = createRouter({ // history: createWebHistory(), // 修改为 history: createWebHashHistory(), routes })</pre> に変更できます。
以上がvue3+ts+vite+electron を使用してデスクトップ アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。