亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

如何用electron把vue項目打包為桌面應(yīng)用exe文件

 更新時間：2022年05月31日 09:54:06   作者：婷嘰  
這篇文章主要介紹了如何用electron把vue項目打包為桌面應(yīng)用exe文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如果按本文操作遇到一些問題報錯，如C:\Users\milyyy\AppData\Roaming\npm-cache\_logs\2018-11-27T07_36_17_406Z-debug.log等等

解決辦法可以參見我的另一篇文章：electron打包VUE項目中遇見的報錯問題及解決

本篇文章源碼請移步我的GitHub地址：簡易使用electron打包vue

踩過了無數(shù)的坑，碰到了很多問題。終于實踐出一套可行的解決方案，基本步驟如下：

1.首先從electron官網(wǎng)克隆一個demo

選擇一個你想存放項目的盤。（可以不用新建文件夾，看個人）直接運行cmd；

注意這里的最好是npm的依賴包

npm與cnpm的區(qū)別

  • 說到npm與cnpm的區(qū)別，可能大家都知道，但大家容易忽視的一點，是cnpm裝的各種node_module，這種方式下所有的包都是扁平化的安裝。
  • 一下子node_modules展開后有非常多的文件。導(dǎo)致了在打包的過程中非常慢。但是如果改用npm來安裝node_modules的話，所有的包都是樹狀結(jié)構(gòu)的，層級變深。
  • 由于這個不同，對一些項目比較大的應(yīng)用，很容易出現(xiàn)打包過程慢且node內(nèi)存溢出的問題
  • 所以建議大家在打包前，講使用cnpm安裝的依賴包刪除，替換成npm安裝的依賴包。
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
cnpm install //npm,cnpm 都可以，cnpm速度較快.
npm start

項目跑起來以后， 就會出現(xiàn)electron的桌面頁面，找到clone下來項目的入口文件main.js 和package.json.接下來修改路徑和配置。

//----main.js----
function createWindow () {
 
  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/../dist/index.html`)  //修改這里
//package.json
{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "electron.js",            //--修改的，為后面做準備
  "scripts": {
    "start": "electron ."       
  }

2. 接下來，在已創(chuàng)建好的vue-cli項目中

安裝electron依賴，運行如下命令：

npm install electron --save-dev
npm install electron-packager --save-dev

現(xiàn)在將clone項目中的main.js拷到剛剛新建的項目中的build文件夾下，并重命名為electron.js  , 并更改config/index.js中生產(chǎn)模式下（build）的assetsPublicPth

  build: {
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
 
    assetsPublicPath: './',     //這里改為./

3. 在新建的項目的package.json文件中增加一條指令

如下：

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js"     //增加的指令

接著執(zhí)行：

npm run build               //生成dist目錄(包含靜態(tài)資源文件)    
npm run electron_dev        //啟動electron

現(xiàn)在，生成桌面應(yīng)用基本成功實現(xiàn)了，還剩下最后一步：打包！

首先，復(fù)制build目錄下的electron.js到dist目錄中，注意很關(guān)鍵的一步是復(fù)制過來之后，要調(diào)整一下loadURL路徑的格式，

像這樣：

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
 
  })
 
  // and load the index.html of the app.
  mainWindow.loadURL(`${__dirname}/index.html`)     //--修改的--

接著，復(fù)制clone例子的package.json到新建項目的dist目錄中。在項目的package.json中（注意不是dist下的package.json）為之前下載好的electron-packager，增加一條啟動命令。

    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=ia32  --icon=./src/assets/yizhu.ico  --overwrite"         //--新增的命令--

接著，如果你要替換應(yīng)用圖標的話，就在項目中的scr文件夾下的assets目錄下，放入你要設(shè)置的exe文件的圖標，為.ico格式。

這里指的注意的是，你的ico圖標是什么名稱，上一條的electron_build里面的路徑最后就要改成你圖標的名稱，像這里的yizhu.ico一樣，yizhu.ico就是我自己圖標的名稱。（這點很重要?。?/p>

這里我要強調(diào)一點, 有同學(xué)到這里運行報錯, 很有可能是你的圖片路徑?jīng)]改過來. 還有一點就是你把自己的圖片強行修改為ico格式了,這點是不允許的. 一定要是原生的ico格式的圖標. 且看我最下面截圖的ico的圖標是怎樣的. 這里我附上一個轉(zhuǎn)為ico格式的鏈接. 操作簡單.

最后，運行

npm run build     //刷新靜態(tài)資源文件
npm run electron_build   //啟動

這個時候已經(jīng)生成了aps-win32-ia32文件夾，找到里面的helloworld.exe文件即可運行。當然，我這里沒有給文件重命名，你們可以自行命名。

到這里，exe文件已經(jīng)最終完成。

下面附上我的文件目錄

多操作幾次，多看報錯代碼，仔細看上面說了什么好對癥下藥。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論