There are several ways to construct electron. The first way is to use the official demo to build electron, the second way is to introduce electron into VUE, and the third way is to create an electric-VUE project.

Some potholes:

1. The electron project cannot use history mode or route lazy loading.

2. ElementUI ICONS display exceptions when building with the official demo, but iView does not. Creating the electron-vue project can solve the problem of abnormal icon display.

iview:

First, use the official electron-quick-start

1. According to

Using the official demo is the easiest way, just pack the project and replace the static and index.html of the demo.

Clone Project:

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
Copy the code

Then change the path in your own vue project. Vuecli2.0 changes the assetsPublicPath and vue cli3.0+ changes the publicPath. As follows: Run NPM run start again to successfully display the vUE project as a desktop application.

Pack 2.

Add the following code to the scripts of package.json:

"package": "Electron packager. MZK --platform=win32 --arch=ia32 --out=./out --asar --app-version=0.0.1 --overwrite --ignore=node_modules"
Copy the code

Then execute the package command NPM run package

The above is a package command for a 32-bit system

Ia32, i.e. — ARCH = IA32, 32-bit operating system, can also be installed on 64-bit operating system

X64, i.e. — ARCH = X64, 64-bit operating system, cannot be installed on 32-bit operating system using this architecture package

The parameters –platform and –arch have been flagged as expired and are written as follows

electron-builder --win --x64
electron-builder --win --ia32
electron-builder --win --armv7l
Copy the code

Introduce electron into VUE

This way isto introduce electron when there is a VUE project. Again, the electron project cannot use history mode, cannot use history mode!

There are several ways to introduce electron in VUE, but the simplest one is introduced first:

1. Introduce electron mode 1 to VUE

(1) Install the Electron

 npm install electron
Copy the code

(2) Install Electron using CNPM

cnpm install -g electron
Copy the code

(3) See if the installation is successful

electron -v
Copy the code

(4) Create the main program entry (main.js) and configuration file package.json

main.js

const {app, BrowserWindow} =require('electron');/ / introduction of the electron
let win;
let windowConfig = {
  width:800.height:600
};// The size of the window in which the window configurator runs
function createWindow(){
  win = new BrowserWindow(windowConfig);// Create a window
  win.loadURL(`file://${__dirname}/index.html`);// The contents to be displayed in the window index. HTML is the generated index. HTML
  win.webContents.openDevTools();  // Start the debugging tool
  win.on('close'.() = > {
    // Recycle the BrowserWindow object
    win = null;
  });
  win.on('resize'.() = > {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('window-all-closed'.() = > {
  app.quit();
});
app.on('activate'.() = > {
  if(win == null){ createWindow(); }});Copy the code

package.json

{
  "name": "ylemusic"."productName": "ylemusic"."author": "Yle"."version": "1.0.0"."main": "main.js".// Main file entry
  "description": "music"."scripts": {
    "pack": "electron-builder --dir"."dist": "electron-builder"."postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "electronVersion": "1.8.4"."win": {
      "requestedExecutionLevel": "highestAvailable"."target": [{"target": "nsis"."arch": [
            "x64"]]}},"appId": "ylemusic"."artifactName": "demo-${version}-${arch}.${ext}"."nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"}},"dependencies": {
    "core-js": "^ against 2.4.1." "."electron-builder": "^ 20.44.4"."electron-package": "^ 0.1.0 from"."electron-updater": "^ 2.22.1"}}Copy the code

(5) Execute under folder dist:

electron .
Copy the code

You can see the project running

Refer to the link

2. Introduction of electron mode ii in VUE (most likely to cause problems)

(1) First add the dependency of electron into package.json of vUE project

npm install electron --save-dev 
npm install electron-packager --save-dev // This is a plug-in into the EXE file, later to use, download well in advance
Copy the code

(2) Move main.js from the electron-quick-start project into the build file of vue and rename it as electron.

Because the relative position of the file is changed, the electron entry file becomes the file address after Vue build, that is, the file address in the dist folder index.html, so the reference address in the electron. Js will also be changed, that is:

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '.. /dist/index.html'),
    protocol: 'file:'.slashes: true
  }))
Copy the code

Add an instruction to the package.json file to start electron, i.e. :

"scripts": {
    "dev": "node build/dev-server.js"."start": "npm run dev"."build": "node build/build.js"."lint": "eslint --ext .js,.vue src"."electron_dev": "npm run build && electron build/electron.js"
  },
Copy the code

Electron_dev is used to start electron. Before doing so, we must ensure that the project already has a static resource file built, so run NPM run build first before running electron build/electron.js.

After this process, after running NPM run electron_dev on the command line, the desktop application previously displayed in electron-quick-start will be displayed again.

(3) Pack the EXE file

First, add a startup command for the electron packager you downloaded earlier.

 "scripts": {
    "dev": "node build/dev-server.js"."start": "npm run dev"."build": "node build/build.js"."lint": "eslint --ext .js,.vue src"."electron_dev": "npm run build && electron build/electron.js"."electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"
  },
Copy the code

Next, manually add electron. Js and package.json to the dist folder

(Dist/go to the package, then go to the js of the entry, and finally go to index.html.)

The main of the package points to the electron. Js copied from the build folder (remember to change the path of index.html in the electron.

 mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:'.slashes: true
  }))
Copy the code

Run NPM run electron_build again to get the packed folder, find *. Exe in it, double click to run it, and finally appear the familiar screen.

Iii. Create the electron vUE project

The website links

Create electron

Then use vue-cli to install the electron-vue template vue init SimulatedGreg /electron-vue CD my-project NPM install # or yarn run dev # or yarn run devCopy the code

With luck, the following screen should appear:If things don’t go well, you may encounter problems like this:

ERROR in Template execution failed: ReferenceError: process is not defined
Copy the code

<% if (! Process. browser) {%> <% if (! htmlWebpackPlugin.options.process.browser) { %>

In. Electron – vue webpack. The renderer. Config. In js:

new HtmlWebpackPlugin({

  filename: 'index.html'.title: "Configure the page title here."./ / in the page is < % = htmlWebpackPlugin. Options. The title % > access
        process: process, // In order to access process in the ejS template syntax, attach process to the next configuration
  template: path.resolve(__dirname, '.. /src/index.ejs'),
  minify: {
    collapseWhitespace: true.removeAttributeQuotes: true.removeComments: true
  },
  nodeModules: process.env.NODE_ENV ! = ='production'
    ? path.resolve(__dirname, '.. /node_modules')
    : false
}),
Copy the code

Finally, attach a detailed explanation: refer to the article for explanation