Reference link: blog.csdn.net/qq_40128375…

Method 1: Clone the electron project for packaging

  • Step 1: Clone the ELECTRON project and run it

    1, the gitclonehttps://github.com/electron/electron-quick-start 2.cd4, NPM start // Start the project, the electron program will be openedCopy the code

  • Step 2: Package your application

    1. Pack the VUE project first: NPM run build, and place the generated dist file in the root directory of the ELECTRON project

    2. Change the path of the load file in main.js in the electron project directory

        mainWindow.loadFile('index.html') // The default request path mainwindow.loadfile ('./dist/index.html') // Modified: replace the file path with index.html in the packaged dist directoryCopy the code

    3. NPM I: install the dependency, NPM run start: start the program, the electron application opens, if the page displays normally, there is no problem, then install the dependency and pack it

    4, Install the electron, electron packager dependency:

        npm install electron --save-dev
    npm install electron-packager --save-dev
Copy the code

    5. Configure the packaging command in package.json file

        "package": "Electron packager. electron desktop application --win --out.. / electron desktop applications - electron - version 6.0.7 - overwrite - icon. = / dist/static/img/logo ico - platform win32 --ignore=node_modules"
Copy the code

    6. Run NPM Run Package to 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. This means that NET Framework must be 4.5 or later and Powershell must be 3.0 or later to be packaged successfullyCopy the code

Mode 2: VUE combined with electron packing

1. Copy the main.js file in the electron project to the root directory of the vue project and rename it as.electron.js

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

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

  mainWindow.loadFile('./dist/index.html'// Load the page path 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()
})
Copy the code

Install the electron, electron packager dependency:

    npm install electron --save-dev
    npm install electron-packager --save-dev
Copy the code

3. Configure the command in package.json and import.electron

    "electron_dev": "npm run build && electron .electron.js"."package": "Electron packager. electron desktop application --win --out.. /.. / electron desktop applications - electron - version 6.0.7 - overwrite - icon. = / dist/static/img/logo ico - platform win32 --ignore=node_modules"
Copy the code

4, packaging,

NPM run package NPM run package // electron packCopy the code