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

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

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

• 首先下载 electron 的依赖

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

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"

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

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

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

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

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

• 到这里就已经是大功告成了，现在就是运行，

• 运行的时候要先，npm run build ， 才可以  npm run packager  打包到本地，生成exe文件，打包成功之后就会出现这个OutApp文件夹，双击里面的 .exe 结尾的文件，就可以运行啦

• 如果做了修改想重新打包的话，需要做完修改之后，npm run build，然后，npm run packager ，还要把之前生成的OutApp这个文件夹删掉，否则会报错

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

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

• 隐藏菜单栏

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

frame: false,

• 屏幕自适应大小

       只要在 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
    })
  }