# 1. Clone the official demo

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

2. Start the project in the root directory

npm install
npm start
Copy the code

If a window appears, success.

3. Put in your own projects.

The vUE project is packaged in the dist folder. Place the files in the folder at the root of the ELECTRON project. Let me run it again.

4. Static resources (images and Element text ICONS) cannot be loaded

  • The page is blank after vue is packaged

Because the path of the packed CSS and JS is not correct

config/index.js

Under build, change assetsPublicPath: ‘/’ to assetsPublicPath: ‘./’,

  • Image not displayed

build/utils.js

Add publicPath: ‘.. /.. / ‘, can

5. Pack the EXE file

Install the electron – builder

NPM install microproject-builder install microproject-builder Install superelectron builder --save--dev (recommended)Copy the code

Install “superelectron Builder “: “^22.10.5” under devDependencies

"devDependencies": {
    "electron": "^ 12.0.2"."electron-builder": "^ 22.10.5"
},
"dependencies": {}Copy the code

Configure the build under package.json

"scripts": {
    "start": "electron ."."build": "electron-builder --win --x64"
},
Copy the code

Add under build configuration

"build": {
    "productName": "Exe project name"."appId": "com.xxx.app"."copyright": "E ICP prepared ******** No."."mac": {
      "target": [
        "dmg"."zip"]},"win": {
      "icon": "build/icons/icon.ico".// Program small icon
      "target": [
        "nsis"."zip"]},"electronDownload": {
    "mirror": "https://npm.taobao.org/mirrors/electron/"   // Taobao mirror}},Copy the code

6. Run NPM run build

The packaged files are in the dist folder

Note: The router Settings for the Vue project must be in hash mode