Electron打包vue项目成exe桌面应用程序

方式一：克隆electron项目进行打包

• 第一步：克隆electron项目并运行

  1、git clone https://github.com/electron/electron-quick-start
  2、cd electron-quick-start
  3、npm install
  4、npm start // 启动项目，会打开electron程序
  

• 第二步：打包程序

  1、先将vue项目打包：npm run build，将生成的dist文件放到electron项目根目录下

  2、修改electron项目目录下main.js中的加载文件的路径

      mainWindow.loadFile('index.html') // 默认的请求路径
      mainWindow.loadFile('./dist/index.html') // 修改后的：将文件路径替换为打包好的dist目录下的index.html
  

  3、npm i：安装依赖，npm run start：启动程序，electron应用程序打开后如果页面正常显示则没有问题，接下来安装依赖进行打包即可

  4、安装electron、electron-packager依赖：

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

  5、在package.json文件中配置打包命令

      "package": "electron-packager . electron桌面应用程序 --win --out ../electron桌面应用程序 --electron-version 6.0.7 --overwrite --icon=./dist/static/img/logo.ico --platform win32 --ignore=node_modules"
  

  6、运行npm run package进行打包

      打包里会提示: WARNING: Make sure that .NET Framework 4.5 or later and Powershell 3 or later are installed, otherwise extracting the Electron zip file will hang.
      也就是说NET Framework必须要是4.5以上版本、Powershell必须要是3.0以上的版本才可以成功打包
  

方式二：vue结合electron打包

1、将electron项目中的main.js复制到vue项目根目录下重命名为.electron.js

const {app, BrowserWindow} = require('electron')
const path = require('path')
let mainWindow

function createWindow () {
  mainWindow = new BrowserWindow({
    width: 500, // 窗口宽度
    height: 1200, // 窗口高度
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('./dist/index.html') // 加载页面路径
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}
app.on('ready', createWindow)
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
  if (mainWindow === null) createWindow()
})

2、安装electron、electron-packager依赖：

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

3、在package.json中配置命令、引入.electron.js

    "electron_dev": "npm run build && electron .electron.js",
    "package": "electron-packager . electron桌面应用程序 --win --out ../../electron桌面应用程序 --electron-version 6.0.7 --overwrite --icon=./dist/static/img/logo.ico --platform win32 --ignore=node_modules"

4、打包

    npm run build // 项目打包
    npm run package // electron打包