快捷導(dǎo)航

Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹

更新時(shí)間：2022年11月03日 15:36:18 作者：歡萊

Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

1、將已有 Vue 項(xiàng)目打包。

2、新建 main.js、package.json 文件

將打包生成的 index.html、js、css、然后再和新建的 main.js、package.json 文件放至一個(gè)目錄下。并命令行切換至這個(gè)目錄。

新建的 main.js 如下：

const { app, BrowserWindow } = require("electron"); // 引入electron
let win;
let windowConfig = {
  width: 800,
  height: 600,
}; // 窗口的大小
function createWindow() {
  win = new BrowserWindow(windowConfig); // 創(chuàng)建一個(gè)窗口
  win.loadURL(`file://${__dirname}/index.html`); // 加載打包生成的index.html
  win.webContents.openDevTools(); // 開(kāi)啟調(diào)試工具
  win.on("close", () => {
    //回收 BrowserWindow 對(duì)象
    win = null;
  });
  win.on("resize", () => {
    win.reload();
  });
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
  app.quit();
});
app.on("activate", () => {
  if (win == null) {
    createWindow();
  }
});

新建的 package.json 如下：

{
    "name": "demo",
    "productName": "項(xiàng)目名稱",
    "author": "作者",
    "version": "1.0.4",
    "main": "main.js",
    "description": "項(xiàng)目描述",
    "scripts": {
        "pack": "electron-builder --dir",
        "dist": "electron-builder",
        "postinstall": "electron-builder install-app-deps"
    },
    "build": {
        "electronVersion": "1.8.4",
        "win": {
            "requestedExecutionLevel": "highestAvailable",
            "target": [
                {
                    "target": "nsis",
                    "arch": [
                        "x64"
                    ]
                }
            ]
        },
        "appId": "demo",
        "artifactName": "demo-${version}-${arch}.${ext}",
        "nsis": {
            "artifactName": "demo-${version}-${arch}.${ext}"
        },
        "extraResources": [
            {
                "from": "./static/xxxx/",
                "to": "app-server",
                "filter": [
                    "**/*"
                ]
            }
        ]
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-packager": "^12.1.0",
        "electron-updater": "^2.22.1"
    },
    "devDependencies": {
        "electron-forge": "^5.2.4"
    }
}

3、安裝包：

yarn install

（報(bào)錯(cuò)不用管，能 electron . 運(yùn)行成功且效果正常就行）

4、運(yùn)行：

electron .

5、注意事項(xiàng)：

vue 項(xiàng)目路由用 hash 模式。
vue 項(xiàng)目的 vue.config.js 要配置 publicPath: './'

（因?yàn)槿舨慌渲?，則 electron 文件路徑不對(duì)）

  module.exports = {
  	 lintOnSave: false,
  	 publicPath: './',
		css: ....
		....
   }

index.html 中文件路徑如以下正確顯示：

<link rel="icon" href="favicon.ico" rel="external nofollow" >
<title>efficiency-helper</title>
<link href="css/chunk-11991773.33db9af5.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-17ca335a.ad6ca46b.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-3dde8fae.019eaf8d.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-4c9aec9b.410cb728.css" rel="external nofollow"  rel="prefetch">
<link href="css/chunk-f52405ee.f4abe7d9.css" rel="external nofollow"  rel="prefetch">

若不配置 publicPath: './' 則：href=“/css/chunk-17ca335a.ad6ca46b.css” 路徑錯(cuò)誤。導(dǎo)致應(yīng)用出現(xiàn)白屏。

到此這篇關(guān)于Vue使用electron轉(zhuǎn)換項(xiàng)目成桌面應(yīng)用方法介紹的文章就介紹到這了,更多相關(guān)Vue electron內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: