vue project is packaged into exe file

Article directory

To package a Vue project as an installable program (.exe), we can use the Electron framework. Electron allows you to create cross-platform desktop applications using web technologies such as Vue, HTML, and CSS.

1. Download the template electron-quick-start

git warehouse download address

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

Insert image description here
安装成功显示

An error may be reported when installing dependencies. Solution

先清一下缓存：npm cache clean --force
设置一下镜像源：npm config set registry https://registry.npm.taobao.org
原来没有设置过的，设置镜像地址：npm config set disturl https://npm.taobao.org/dist
设置electron镜像：npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

Insert image description here
Set the electron mirror: npm config set electron_mirror https://npm.taobao.org/mirrors/electron/ If the error is reported and cannot be added, directly find the .npmrc file, open it and
paste it in

electron_mirror=https://npm.taobao.org/mirrors/electron/

2. Modify the vue file configuration to be packaged and package it

Find the vue.config.js configuration file

//	vue.config.js
module.exports = {
    
       
	publicPath: "./",   
}

In some cases, the routing configuration page needs to be modified (I modified the vue.config.js file and directly accessed the dist/index.html page after packaging it, which was blank, and the css and js files did not report path errors)
Insert image description here

Then package the vue project into a dist file

3. Configure electron-quick-start

Delete the index.html file in the root directory of electron-quick-start, and
put the dist file packaged by the vue project into the electron-quick-start file.
Insert image description here

Install the electr-packager dependency required for packaging under the electron-quick-start project

npm install electron-packager --save-dev

Modify the main.js file configuration under the electron-quick-start project.
Insert image description here
There are several properties here to configure the window size of the exe file, as well as disable the close button and whether to remove the window border.

Don't worry, there is one more step. Enter package.json and add the packager directive in script

![Insert image description here](https://img-blog.csdnimg.cn/3638f3d3a91c4fba9b9e4fee3241dafb.png

Finally package with instructions
Insert image description here

The exe file we want
Insert image description here