electron将vue项目打包为桌面端应用详解以及遇到的问题

旧城等待， 2022-11-06 14:50 566阅读 0赞

项目需求，vue项目本来是个pc端的，甲方要求可以在桌面直接打开，然后搜了一下，发现广发网友都推荐 electron ，立马打开官方文档，看似简单，没想到却走了很多弯路，所以有了这篇文章

[有需要的可以先看下官方的文档 https://www.electronjs.org/docs][https_www.electronjs.org_docs]

*  ### 首先下载 electron 的依赖 ###

装好之后可以  **electron-packager -v 和 electron-packager ./ --version **检查一下是否安装成功，如果跳出版本号，那就是安装成功了

![20210409165509218.png][]![20210409165434958.png][]

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

*  ### 然后就是下载官方所需的文件了 ###

这个clone起来会特别慢，到一半就会消失报错，后来我找了别的大佬的 git，单独下了里面的 main.js ，如果网速可以的话，可以复制 git 地址直接下，如果不行，就直接复制我这里的代码吧，**反正clone项目也主要是用里面的 main.js**

git clone https://github.com/electron/electron-quick-start

在项目的 **根目录下**** **新建一个 js 文件，命名为 main.js ， 然后把下面这段代码复制过去 ，注意这里的入口 ，16行代码是 **mainWindow.loadFile('../dist/index.html')**

// Modules to control application life and create native browser window
    const {app, BrowserWindow} = require('electron')
    const path = require('path')
    
    function createWindow () {
      // Create the browser window.
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          preload: path.join(__dirname, 'preload.js')
        }
      })
    
      // and load the index.html of the app.
      mainWindow.loadFile('../dist/index.html')
    
    // 打开控制台
    // mainWindow.webContents.openDevTools({mode:'detach'});
      mainWindow.webContents.openDevTools()
    }
    
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    app.whenReady().then(() => {
      createWindow()
    
      app.on('activate', function () {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
      })
    })
    
    // Quit when all windows are closed, except on macOS. There, it's common
    // for applications and their menu bar to stay active until the user quits
    // explicitly with Cmd + Q.
    app.on('window-all-closed', function () {
      if (process.platform !== 'darwin') app.quit()
    })
    
    // In this file you can include the rest of your app's specific main process
    // code. You can also put them in separate files and require them here.

*  ### 在根目录的 package.json 文件里面，添加操作命令 ###

这两个命令名字是可以随便，只要运行的时候 **npm run 你起的名字**，就可以了，比如我这里，运行的时候就是 **npm run packager**，然后就开始打包

"electron": "npm run build && electron build/electron.js"

"packager": "electron-packager ./dist --platform=win32 --arch=x64 --out ./OutApp --electron-version 6.0.5 --overwrite --icon=./src/imgs/ico.ico"

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70][]

*  ### 把我们刚刚写好的 main.js  文件，复制到dist文件夹里，改名为 electron.js ###

复制好了之后，入口文件要修改，**这里很关键**

**      根目录下的main.js 文件里面是   mainWindow.loadFile('../dist/index.html')   ，dist 文件夹里的 electron.js 文件是  mainWindow.loadFile('index.html')**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3][]

*  ### 把刚刚修改好的，package.json 文件，复制到dist里面，这是个入口文件，所以一定要有，没有就会报错的，这个文件要指向 dist 文件夹下面的 electron.js 文件，没有的话也会报错的 ###

到这里项目就是有两个 package.json 文件了

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 4][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 5][]

*  ### 到这里就已经是大功告成了，现在就是运行， ###
 *  ### 运行的时候要先，npm run build ， 才可以  npm run packager  打包到本地，生成exe文件，打包成功之后就会出现这个OutApp文件夹，双击里面的 .exe 结尾的文件，就可以运行啦 ###
 *  ### 如果做了修改想重新打包的话，需要做完修改之后，npm run build，然后，npm run packager ，还要把之前生成的OutApp这个文件夹删掉，否则会报错 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 6][]

*  ### 最后还有个接口地址的问题 ###

这个接口地址也是需要改一下，如果运行出来，但是接口调不通，就是接口地址的问题，可以 alert 看一下，地址是多少，然后做对应的修改就可以了

*  ### 隐藏菜单栏 ###

在 main.js ，和 dist 里面的 electron.js 文件里面加一行代码就行了

frame: false,

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 7][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 8][]

*  ### 屏幕自适应大小 ###

只要在 main.js 和 electron.js 里面添加这个代码就行了

let size = require('electron').screen.getPrimaryDisplay().workAreaSize
      let width = parseInt(size.width)
    
      console.log(width)
      if (width >= 1920) {
        mainWindow = new BrowserWindow({
          fullscreenable: true,
          fullscreen: true,
          autoHideMenuBar: true
        })
      } else {
        let height = parseInt(1080 * size.width / 1920 + 30)
        mainWindow = new BrowserWindow({
          width: width,
          height: height,
          fullscreenable: false,
          fullscreen: true,
          autoHideMenuBar: true
        })
      }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 9][]

[https_www.electronjs.org_docs]: https://www.electronjs.org/docs
[20210409165509218.png]: https://img-blog.csdnimg.cn/20210409165509218.png
[20210409165434958.png]: /images/20221023/7ed081d19e8c420e81ccf05f502be2ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70]: /images/20221023/10df959e3474490cbe60b1d707e2bd56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 1]: /images/20221023/2fcc558058fe4d628d8f4a7edb082815.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210310101939877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 3]: /images/20221023/faa59ccd6ccd4e2386447a4ca637c85b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20210310102127372.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 5]: /images/20221023/ac7b41211e914e8591366b23b192effd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 6]: /images/20221023/c2deba3c06fb4cf3a252c348f797d200.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210310133819643.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 8]: /images/20221023/48697ca4b8344f52b365ae9066e2aed9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9fcm9uZw_size_16_color_FFFFFF_t_70 9]: /images/20221023/7e21292b6cde473694aaa032a3857171.png