Package the existing vue project into a desktop application with electron

1. First, let’s clone the demo on the official website of electron

# Clone this repository
git clone https://github.com/electron/electron-quick-start
# Go into the repository
cd electron-quick-start
# Install dependencies
npm install
# Run the app
npm start

Next, make the following modifications to main.js and package.json in the clone project

main.js

 win.loadFile('../dist/index.html'); //修改路径

package.json

{
    
    
  "name": "my-Electron",
  "version": "1.0.0",
  "main": "electron.js", //改为electron.js 为后面做准备
  "license": "MIT",
  "scripts": {
    
    
    "start": "electron ."
  },

2. Configure the existing vue project
1. Install the electron dependency and execute the following command

npm install electron --save-dev

npm install electron-packager --save-dev

2. Copy the modified main.js above to the build folder in the project and rename it to electron.js
3. Change assetsPublicPath to a relative path in the directory config/index.js

 assetsPublicPath: './',

4. Add an instruction to package.json in the project

"scripts": {
    
    
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",//新增的命令

then run

//生成dist文件夹
npm run build
//运行electron
npm run electron_dev

Now, the generation of the desktop application has basically been successfully implemented, but the last step is packaging!

First, copy the electron.js in the build folder and the previously modified package.json file to dist ,
and then add the following instructions to the package.json in the vue project (this package.json is the original vue project)

  "scripts": {
    
    
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64  --icon=./src/assets/ele.ico  --overwrite"  //新增的指令
  },

Among them, icon=./src/assets/ele.ico is to generate the exe file icon, and the ico here must be the native ico file format. Here is the ico online production link

Finally execute the following command

npm run build 
npm run electron_build

Finally, a corresponding folder such as my-Electron-win32-x64 will be generated. Find my-Electron.exe in the generated file and click to open it to see the generated desktop application. As shown in the picture below (this is generated by my company's existing project)
insert image description here
Note that the page may be blank after opening

There are roughly two reasons:
the first one: in general, first determine whether it is a path problem, and if it is a path problem, modify the path.

The second method: If the default mode configured in router/index is history, then it will be blank after packaging. Replace history with hash or delete the default mode configuration.
If you must use the history mode, you need to add a candidate resource on the server side that covers all situations: if the URL does not match any static resources, you should return an index.html, which is the page your app depends on. So just delete the mode or change the mode to hash

Package the existing vue project into a desktop application with electron

おすすめ