欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue使用electron生成桌面應(yīng)用過程詳解

 更新時間:2023年04月17日 08:51:43   作者:不可名狀邵雅虎  
這篇文章主要介紹了Vue使用electron生成桌面應(yīng)用過程,很想使用 electron 制作一個桌面應(yīng)用,但是真的上手使用的時候才發(fā)現(xiàn) electron 的坑實在是太多了,先將遇到的坑記錄在這里,遇到一個記錄一個

學習關(guān)鍵語句

使用electron打包vue項目

electron制作桌面應(yīng)用

寫在前面

很想使用 electron 制作一個桌面應(yīng)用,但是真的上手使用的時候才發(fā)現(xiàn) electron 的坑實在是太多了

先將遇到的坑記錄在這里,遇到一個記錄一個

  • 使用 9 以上版本的 vue-i18n 的項目打包成應(yīng)用時會失敗,本地運行沒問題
  • 項目路徑中有中文會打包失敗

和 electron 相關(guān)的插件版本更替實在是是太快,并且版本之間還不一定能兼容,所以這篇文章中使用到的插件都會寫死版本來保證一定可以打包成功

開始

項目開始

我們不從零開始,直接從之前的項目中拉一個文件來作為例子,你可以點擊這里進行下載項目,不需要積分

值得一提的是,這篇文章不會提供完整的文件,你可以使用下載的項目開始學習

安裝依賴

安裝指定版本 此時日期為 2023-04-11

npm i electron@24.0.0 -D
npm i vite-plugin-electron@0.11.1 -D
npm i electron-builder@23.6.0 -D
npm i cross-env@7.0.3

針對項目由 vite 創(chuàng)建的 vue3 項目

修改 vite.config.ts

變動語句

vite.config.ts 變動

import electron from 'vite-plugin-electron'
electron({
    entry: "dist-electron/index.js"
})

放入語句

vite.config.ts 放入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: "dist-electron/index.js"
    })
  ],
})

修改完成后,會自動在項目根目錄出現(xiàn) dist-electron 文件夾,文件夾內(nèi)有一個文件 index.js

如果沒有自動出現(xiàn),那就手動創(chuàng)建

修改 index.js

index.js

import { app, BrowserWindow } from 'electron'
import path from 'path'
// app 控制應(yīng)用程序的事件生命周期。
// BrowserWindow 創(chuàng)建并控制瀏覽器窗口。
let win;
// 定義全局變量獲取 窗口實例
const createWindow = () => {
    win = new BrowserWindow({
        webPreferences: {
            devTools: true,
            contextIsolation: false,
            nodeIntegration: true
            // 允許html頁面上的javascipt代碼訪問nodejs 環(huán)境api代碼的能力(與node集成的意思)
        }
    })
    if (process.env.NODE_ENV != 'development') {
        win.loadFile(path.join(__dirname, "../dist/index.html"));
    } else {
        // vite-plugin-electron@0.11.1版本使用以下
        win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
    }
}
//在Electron完成初始化時被觸發(fā)
app.whenReady().then(createWindow)

修改 package.json

  • 刪除 “type”: “module”
  • “name” 同級添加 “main”: “dist-electron/index.js”
  • ,將 script 中的 dev 指令修改為 cross-env NODE_DEV=development vite
  • 將 script 中的 build 指令修改為 vue-tsc --noEmit && vite build && electron-builder

將以下添加到 “name” 同級

  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright ? 2023 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist",
      "dist-electron"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8086"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具體內(nèi)容"
    }
  }

本地測試

npm run dev

會自動打開

打包成exe文件

npm run build

輸出在項目根目錄下新建的文件夾 release 中,雙擊 exe 文件進行安裝就可以打開了

到此這篇關(guān)于Vue使用electron生成桌面應(yīng)用過程詳解的文章就介紹到這了,更多相關(guān)Vue electron生成桌面應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 如何通過shell腳本自動生成vue文件詳解

    如何通過shell腳本自動生成vue文件詳解

    這篇文章主要給大家介紹了關(guān)于如何通過shell腳本自動生成vue文件的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-09-09
  • 基于vue實現(xiàn)簡易打地鼠游戲

    基于vue實現(xiàn)簡易打地鼠游戲

    這篇文章主要為大家詳細介紹了基于vue實現(xiàn)簡易打地鼠游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-08-08
  • Vue.Draggable實現(xiàn)拖拽效果

    Vue.Draggable實現(xiàn)拖拽效果

    這篇文章主要介紹了Vue.Draggable實現(xiàn)拖拽效果,使用簡單方便 ,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-06-06
  • vue實現(xiàn)原生下拉刷新

    vue實現(xiàn)原生下拉刷新

    這篇文章主要為大家詳細介紹了vue實現(xiàn)原生下拉刷新,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue的常用組件操作方法應(yīng)用分析

    vue的常用組件操作方法應(yīng)用分析

    這篇文章主要介紹了vue的常用組件操作方法應(yīng)用分析,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2018-04-04
  • 使用 vue 實例更好的監(jiān)聽事件及vue實例的方法

    使用 vue 實例更好的監(jiān)聽事件及vue實例的方法

    這篇文章主要介紹了使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法,單獨監(jiān)聽事件,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-04-04
  • 使用vue實現(xiàn)各類彈出框組件

    使用vue實現(xiàn)各類彈出框組件

    這篇文章主要介紹了使用vue實現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2019-07-07
  • Vue中對數(shù)組和對象進行遍歷和修改方式

    Vue中對數(shù)組和對象進行遍歷和修改方式

    這篇文章主要介紹了Vue中對數(shù)組和對象進行遍歷和修改方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue實現(xiàn)吸壁懸浮球

    vue實現(xiàn)吸壁懸浮球

    這篇文章主要為大家詳細介紹了vue實現(xiàn)吸壁懸浮球,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • element ui中表單el-form的label如何設(shè)置寬度

    element ui中表單el-form的label如何設(shè)置寬度

    這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10

最新評論