How does electron package vue projects

This article mainly introduces electron how to package the vue project, the article is very detailed, has a certain reference value, interested friends must read it!

Create a project to add electron-builder

1. Run the command under the project directory: vue add electron-builder

2. After electron-builder is added, the electron version will be selected, and the latest version will be selected directly:

Failed to download electron

Vue add electron-builder download electron will fail. Use Taobao image to download: cnpm i electron

Form running

1. Try to run electron form: npm run electron:serve after the download is complete

2. The form runs successfully:

Package exe

1. Run the packaging command: npm run electron:build

2. Because the package will be downloaded from github, the domestic network will generally fail. You need to download nsis and winCodeSign manually (you can also download it from github if the network allows, and I downloaded and shared it here). Click here to download, extract the code: 1uq8, and copy (replace) nsis and winCodeSign to the following directory:

3. After copying the file, run the packing command again to make the package successful:

4. After the packaging is completed, there will be an extra dist_eletron in the project directory, and the packaged exe is in it. This exe needs to be used after installation:

5. However, there will also be an exe with the same name as the project under the win-unpacked of dist_eletron. This exe can be run without installation, but it depends on the files in the same directory and cannot be used directly:

White screen

1. In fact, the packaging has been successfully completed here, but when you open exe, you will find that it is different from the form running in the project, or the white screen directly. This is due to the vue and electron route patterns. Vue generally defaults to history mode.

2. You need to modify it in the index.js of router: introduce createWebHashHistory from vue-router and change createWebHistory (process.env.BASE_URL) to createWebHashHistory (process.env.BASE_URL).

If the project is vue2, directly change the value of mode from history to hash:

3. Delete the dist_eletron directory in the project and re-npm run electron:build the package:

4. Package successfully:

The above is all the contents of the article "how to package the vue Project by electron". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!