初始版 - 区分web，electron

.env.web

+VUE_APP_IS_WEB=true
+IS_WEB=true
\ No newline at end of file

package.json

 {
   "name": "feidao",
-  "version": "0.1.2",
+  "version": "0.1.7",
   "private": true,
   "scripts": {
-    "serve": "vue-cli-service serve",
+    "serve": "vue-cli-service serve --mode web",
     "build": "vue-cli-service build",
+    "build:web": "vue-cli-service build --mode web",
     "test:unit": "vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
@@ -48,6 +49,7 @@
     "less-loader": "^5.0.0",
     "prettier": "^2.2.1",
     "spectron": "15.0.0",
+    "terser-webpack-plugin": "4",
     "vue-cli-plugin-electron-builder": "~2.1.1",
     "vue-template-compiler": "^2.6.11"
   }

src/App.vue

-<template>
-  <div id="app" ref="appcontainer" :style="style">
-    <!-- <div id="nav">
-      <router-link to="/">Home</router-link> |
-      <router-link to="/about">About</router-link>
-    </div> -->
-    <router-view />
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      style: { height: 'auto' }
-    };
-  },
-  mounted() {
-    this.style.height = document.documentElement.clientHeight + 'px';
-    window.onresize = () => {
-       this.style.height  = document.documentElement.clientHeight + 'px';
-    };
-  }
-}
-</script>
-<style>
-@import './assets/css/normalize.css'; /*引入样式*/
-</style>
-<style lang="less">
-#app {
-  
-}
-
-@import './assets/css/common.less'; /*引入公共样式*/
-</style>
-

src/main/events/app.js

+import { app } from 'electron'
+
+class AppEvents {
+  create (appManager) {
+    this.appManager = appManager
+    this.windowManager = appManager.windowManager
+
+    app.on('activate', () => {
+      if (this.windowManager.mainWindow.win === null) {
+        console.log('Main window is null!')
+      }
+    })
+
+    /* 在Electron加载前需要进行初始化
+    Before electron app is ready, we should initial */
+    app.on('ready', async () => {
+      appManager.initApp()
+    })
+
+    /* app退出之前执行
+    Do something before we quit */
+    app.on('before-quit', () => {
+      // appManager.tray.destroy()
+    })
+
+    // 所有窗口都被关闭
+    app.on('window-all-closed', () => {
+      this.windowManager.mainWindow.win = null
+
+      if (process.platform === 'darwin') {
+        return
+      }
+      // 设置app托盘菜单 / Set the app tray
+      // appManager.tray.setToolTip('窗口被关闭了！\nWindow is closed!')
+      // appManager.tray.displayBalloon({
+      //   title: '嗨~',
+      //   content: '我在这里哦，并没有退出',
+      //   noSound: true
+      // })
+    })
+  }
+}
+
+export default new AppEvents()

src/main/events/ipc.js

+import { ipcMain, dialog } from 'electron'
+
+class IpcEvents {
+  create (appManager) {
+    this.appManager = appManager
+
+    /* 翻译器函数
+    Translator function */
+    // const $t = appManager.translator.get()
+
+    // ipc通信示例 / ipc demo
+    ipcMain.on('showDialog', (sys, msg) => {
+      dialog.showMessageBox({
+        type: 'info',
+        title: '收到消息！',
+
+        // 在任何能调用翻译器函数的地方都能使用多语言
+        // Multi-language support where translator functions are available
+        // message: $t('reciveFromRenderer'),
+        message: 'reciveFromRenderer',
+        detail: msg
+      })
+    })
+
+    // 语言变更事件 / language change event
+    ipcMain.on('appLanguageChange', (sys, lang) => {
+      this.appManager.languageChange(lang)
+    })
+  }
+}
+
+export default new IpcEvents()

src/main/index.js

+/* 主进程入口文件
+Main process entry file */
+
+/* 保存此文件时electron将会重启
+Electron will restart when saving this file */
+
+/* AppManager负责管理整个app
+AppManager is responsible for managing the entire app */
+import AppManager from './managers/app'
+import { protocol } from 'electron'
+
+//热加载
+try {
+	require('electron-reloader')(module);
+} catch {}
+
+// Scheme must be registered before the app is ready
+protocol.registerSchemesAsPrivileged([
+  { scheme: 'app', privileges: { secure: true, standard: true } }
+])
+
+const app = new AppManager()
+
+/* 可通过electron remote从渲染进程（vue）获取到appManager
+You can access appManager with electron remote from renderer process (vue) */
+global.appManager = app
+
+export default app

src/main/managers/app.js

+/* eslint-disable no-undef */
+import path from 'path'
+import { Tray, nativeImage } from 'electron'
+
+import EventManager from './event'
+import WindowManager from './window'
+import MenuManager from './menu'
+
+// import Translator from '../plugins/translator'
+
+class AppManager {
+  constructor () {
+    // this.translator = new Translator()
+    this.windowManager = new WindowManager(this)
+    this.menuManager = new MenuManager(this)
+    this.eventManager = new EventManager(this)
+  }
+
+  /* 初始化app，创建窗口及托盘
+  Initialize the app, create windows and tray */
+  initApp () {
+    this.windowManager.createAllWindows()
+    // this.createAppTray()
+  }
+
+  languageChange (lang) {
+    // this.translator.changeLang(lang)
+
+    /* 重新设置托盘菜单（变更语言）
+    Reset the language of the tray menu to change language of the tray */
+    // this.setAppTrayMenu()
+  }
+
+  /* Create app tray
+  创建托盘 */
+  createAppTray () {
+    // try {
+    //   const iconPath = path.join(__static, 'app.ico')
+    //   const trayIcon = nativeImage.createFromPath(iconPath)
+    //   this.tray = new Tray(trayIcon)
+    //   this.setAppTrayMenu()
+    // } catch (err) {
+    //   console.error('Failed to create app tray, error:', err)
+    // }
+  }
+
+  /* Create tray menu
+  创建托盘菜单 */
+  setAppTrayMenu () {
+    // const menu = this.menuManager.AppTrayMenu()
+    // this.tray.setToolTip('运行中！Still Working!')
+    // this.tray.setContextMenu(menu)
+  }
+}
+
+export default AppManager

src/main/managers/event.js

+import app from '../events/app'
+import ipc from '../events/ipc'
+
+class EventManager {
+  constructor (appManager) {
+    this.appManager = appManager
+    this.createEvents()
+  }
+
+  createEvents () {
+    /* Create electron ipc and app events
+      创建app、ipc事件 */
+    app.create(this.appManager)
+    ipc.create(this.appManager)
+  }
+}
+
+export default EventManager

src/main/managers/menu.js

+import { app, Menu, dialog } from 'electron'
+
+class MenuManager {
+  constructor (appManager) {
+    this.appManager = appManager
+    this.windowManager = appManager.windowManager
+    // this.translator = appManager.translator
+  }
+
+  AppTrayMenu () {
+    // const $t = this.translator.get()
+
+    // // Menu template
+    // const template = [
+    //   {
+    //     key: '1',
+    //     label: $t('trayMenu.reset'), // 支持多国语言 / support multi-languauge
+    //     click: () => {
+    //       if (!this.windowManager.mainWindow.win) {
+    //         this.windowManager.mainWindow.createWindow()
+    //       }
+
+    //       /* 执行electron窗口对象方法
+    //        Execute electron window method */
+    //       this.windowManager.mainWindow.win.restore() //将窗口从最小化状态恢复到以前的状态
+    //       this.windowManager.mainWindow.win.moveTop() //无论焦点如何, 将窗口移至顶端(z轴上的顺序).
+    //     }
+    //   },
+    //   {
+    //     key: '2',
+    //     label: $t('trayMenu.openLink'),
+    //     click: () => {
+    //       const { shell } = require('electron')
+    //       shell.openExternal('https://www.electronjs.org/docs')
+    //     }
+    //   },
+    //   {
+    //     key: '3',
+    //     label: $t('trayMenu.openDialog'),
+    //     click: () => {
+    //       dialog.showMessageBox({
+    //         type: 'info',
+    //         title: $t('trayMenu.dialog.title'),
+    //         message: $t('trayMenu.dialog.message'),
+    //         detail: $t('trayMenu.dialog.detail')
+    //       })
+    //     }
+    //   },
+    //   {
+    //     key: '4',
+    //     label: $t('trayMenu.exit'),
+    //     click: () => {
+    //       app.exit()
+    //     }
+    //   }
+    // ]
+    // return Menu.buildFromTemplate(template)
+  }
+}
+
+export default MenuManager

src/main/managers/window.js

+import MainWindow from '../windows/mainWindow'
+
+class WindowManager {
+  constructor () {
+    this.mainWindow = new MainWindow()
+  }
+
+  /* Create all windows
+    创建所有窗口 */
+  createAllWindows () {
+    this.mainWindow.createWindow()
+  }
+}
+export default WindowManager

src/main/plugins/translator.js

+// import i18n from '../../plugins/i18n'
+
+class Translator {
+  constructor (locale, messages, fallbackLocale) {
+    // this.locale = locale || i18n.locale
+    // this.messages = messages || i18n.messages
+    // this.fallbackLocale = fallbackLocale || i18n.fallbackLocale
+  }
+
+  /* Change language
+  改变翻译器语言 */
+  changeLang (locale) {
+    // this.locale = locale
+  }
+
+  /* 获取翻译函数（为了保持this正确指向）
+  Get the translation function (to keep this pointed to correctly) */
+  get () {
+    return i => {
+      // return this.$t(i)
+      return 1
+    }
+  }
+
+  /* 翻译函数
+  Translation function */
+  $t (original) {
+    // function $query (trans) {
+    //   for (let i = 0; i < textList.length; i++) {
+    //     const key = textList[i]
+    //     if (typeof trans === 'object') trans = trans[key]
+    //   }
+    //   return trans || original
+    // }
+    // const textList = original.split('.')
+    // let re = $query(this.messages[this.locale])
+    // if (re === original) re = $query(this.messages[this.fallbackLocale])
+    // return re
+    return 1
+  }
+}
+
+export default Translator

src/main/windows/mainWindow.js

+import { BrowserWindow, Menu } from 'electron'
+import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+
+class MainWindow {
+  constructor (win) {
+    /* win代表electron窗口实例
+     win is this electron window instance */
+    this.win = win
+  }
+
+  initBrowserPage () {
+    // Dev or not
+    if (process.env.WEBPACK_DEV_SERVER_URL) {
+      this.win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+      /* 开发环境下自启动开发者工具
+        start developer tools in the development environment */
+      this.win.webContents.openDevTools({ mode: 'detach' })
+    } else {
+      createProtocol('app')
+      this.win.loadURL('app://./index.html')
+    }
+
+    this.win.on('closed', () => {
+      this.win = null
+      console.log('windows closed')
+    })
+  }
+
+  createWindow () {
+    if (this.win) {
+      console.warn('window is already exists!')
+      return
+    }
+
+    const win = new BrowserWindow({
+      width: 1100,
+      height: 770,
+      minWidth: 1100,
+      minHeight: 770,
+      webPreferences: {
+        /* 注意，这些设置有关程序的安全性，请谨慎使用！
+          Note: these settings are related to the security of the program, please use it with caution! */
+        enableRemoteModule: true, // Electron 10.x起需要主动启用才可在渲染进程中使用remote / Electron 10.x and above need to be actively enabled in order to use remote in the rendering process
+        webSecurity: false, // 设为false允许跨域 / Set to false to allow cross-domain requests
+        nodeIntegration: true, // 允许渲染进程使用node.js / node integration, allow renderer process use node.js!
+        contextIsolation: false, //nodeIntegration: true 和 contextIsolation: false 才可以 require() 使用
+      },
+      // eslint-disable-next-line no-undef
+      icon: `${__static}/app.ico`,
+      frame: false
+    })
+
+    this.win = win
+    this.initBrowserPage()
+    // this.setWindowMenu()
+  }
+
+  setWindowMenu () {
+    if (process.platform === 'darwin') {
+      const template = [
+        {
+          label: 'vue-cli-electron-template',
+          submenu: [
+            {
+              role: 'about'
+            },
+            {
+              role: 'quit'
+            }
+          ]
+        }
+      ]
+      const menu = Menu.buildFromTemplate(template)
+      Menu.setApplicationMenu(menu)
+      return
+    }
+
+    Menu.setApplicationMenu(null)
+  }
+}
+
+export default MainWindow

src/plugins/bus.js

+// Electron window global Bus
+const { clipboard } = require('electron')
+
+const install = (Vue, options) => {
+  const Bus = new Vue({
+    data () {
+      return {
+        process,
+        clipboard, // electron clipboard object
+        vueSet: Vue.set,
+        dialog: undefined, // electron dialog
+        win: undefined, // this electron window
+        router: options.router,
+        status: {
+          isFocus: false,
+          isBlur: false,
+          keyPress: {}
+        }
+      }
+    },
+    created () {
+      this.init()
+      this.events()
+    },
+    methods: {
+      init () {
+        this.win = this.$electron.remote.getCurrentWindow()
+        this.dialog = this.$electron.remote.dialog
+      },
+      events () {
+        this.win.on('blur', () => {
+          this.status.isBlur = true
+          this.status.isFocus = false
+          this.keyPress = {}
+        })
+        this.win.on('focus', () => {
+          this.status.isFocus = true
+          this.status.isBlur = false
+        })
+      },
+      getAppManager () {
+        return this.$electron.remote.getGlobal('appManager')
+      },
+      appGetPath (pathName = 'desktop') {
+        return this.$electron.remote.app.getPath(pathName)
+      },
+
+      // router
+      changePage (item) {
+        this.router.push({
+          name: item.name
+        })
+      },
+
+      // ---
+      emit (event, ...args) {
+        this.$emit(event, ...args)
+      },
+      on (event, callback) {
+        this.$on(event, callback)
+      },
+      off (event, callback) {
+        this.$off(event, callback)
+      }
+    }
+  })
+  Vue.prototype.$bus = Bus
+}
+
+export default install

src/plugins/i18n.js

+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+/* 读取语言文件夹下所有的翻译文件及内容
+Read all translation files and content in the language folder */
+function loadLocaleMessages () {
+  const locales = require.context('../locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+export default new VueI18n({
+  locale: 'zh',
+  fallbackLocale: 'en',
+  /* 可以在vue页面中使用 console.log(this.$i18n.messages) 看到读取到的翻译内容
+  You can use console.log (this.$i18n.messages) in the vue page to see the translations read */
+  messages: loadLocaleMessages()
+})

src/renderer/App.vue

+<template>
+  <div id="app" ref="appcontainer" :style="style">
+    <div id="app-bar" v-if="!is_web">
+      <div id="app-title">
+        飞稻设计平台
+      </div>
+      <div id="app-action">
+        <div
+          class="app-action-button"
+          @click="win.minimize()"
+        >
+          <!-- <svg-icon icon-class="app-hidden" /> -->
+          <span>hide</span>
+        </div>
+        <div
+          class="app-action-button"
+          @click="autoMaximize()"
+        >
+          <!-- <svg-icon icon-class="app-fullsize" /> -->
+          <span>fullscreen</span>
+        </div>
+        <div
+          class="app-action-button button-red"
+          @click="win.close()"
+        >
+          <!-- <svg-icon icon-class="app-exit" /> -->
+          <span>exit</span>
+        </div>
+      </div>
+    </div>
+    <!-- <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div> -->
+    <router-view />
+  </div>
+</template>
+<script>
+const isWeb = process.env.VUE_APP_IS_WEB;
+const { remote } = !isWeb ? window.require('electron') : {};
+export default {
+  data() {
+    return {
+      style: { height: 'auto' },
+      win: remote && remote.getCurrentWindow() || null,
+      originSize: true,
+      // is_web:isWeb,
+    };
+  },
+  computed: {
+    is_web() {
+      return process.env.VUE_APP_IS_WEB;
+    }
+  },
+  mounted() {
+    console.log(process,process.env.VUE_APP_IS_WEB,isWeb,this.is_web)
+    this.style.height = document.documentElement.clientHeight + 'px';
+    window.onresize = () => {
+       this.style.height  = document.documentElement.clientHeight + 'px';
+    };
+  },
+  methods: {
+    autoMaximize () {
+      if (this.originSize) this.win.maximize()
+      else this.win.restore()
+      this.originSize = !this.originSize
+    }
+  },
+}
+</script>
+<style>
+@import '../assets/css/normalize.css'; /*引入样式*/
+</style>
+<style lang="less">
+#app-bar {
+  background-color: #263238;
+  color: #B2CCD6;
+  display: flex;
+  // 如果你想让某区域可以拖动，将其设为drag
+  // 但是设为drag的区域无法被点击，请注意
+  // 可以设置为no-drag来恢复点击
+  // If you want to make a region draggable, set it to drag
+  // But the area set as drag cannot be clicked, please note
+  // can be set to no-drag to resume clicks
+  -webkit-app-region: drag;
+  height: 32px;
+}
+#app-action {
+  padding: 0;
+  font-size: 16px;
+  display: flex;
+  -webkit-app-region: no-drag;
+  text-align: center;
+}
+
+.app-action-button {
+  padding: 0 8px;
+  color: #FFF;
+  transition: .2s ease;
+  opacity: 0.7;
+  line-height: 32px;
+}
+
+.app-action-button:hover {
+  background-color: #436677;
+  opacity: 1;
+}
+
+.app-action-button:active {
+  background-color: #3A4A52;
+}
+
+@import '../assets/css/common.less'; /*引入公共样式*/
+</style>
+

src/components/common/recursion.vue → src/renderer/components/common/recursion.vue

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import tophead from '@/components/scaffold/tophead.vue';
+import tophead from '@/renderer/components/scaffold/tophead.vue';
 export default {
     name: "recursion",
     props: {

src/components/scaffold/fullpage.vue → src/renderer/components/scaffold/fullpage.vue

 <template>
   <div>
+      <!-- <img id="logo" src="~@/assets/logo.png" alt="electron-vue"> -->
       <button @click="$router.go(-1)">返回</button>
       <div>
          是否显示弹窗{{$t('lang.home')}} {{showPop}}
@@ -53,13 +54,13 @@
 
 <script>
 import { mapState, mapMutations } from 'vuex';
-import TopHead from '@/components/scaffold/tophead.vue';
-import TopBody from '@/components/scaffold/tobody.vue';
-import SimpleInput from '@/components/common/simpleInput.vue';
-import RichEditor from '@/components/common/richEditor.vue';
-import NumberInput from '@/components/common/numberInput.vue';
-import SelectField from '@/components/common/selectField.vue';
-import ImageUpload from '@/components/common/imageUpload.vue';
+import TopHead from '@/renderer/components/scaffold/tophead.vue';
+import TopBody from '@/renderer/components/scaffold/tobody.vue';
+import SimpleInput from '@/renderer/components/common/simpleInput.vue';
+import RichEditor from '@/renderer/components/common/richEditor.vue';
+import NumberInput from '@/renderer/components/common/numberInput.vue';
+import SelectField from '@/renderer/components/common/selectField.vue';
+import ImageUpload from '@/renderer/components/common/imageUpload.vue';
 // const { ipcRenderer } = window.require('electron'); //浏览器端报错
 export default {
     props: {

src/main.js → src/renderer/main.js

@@ -3,13 +3,12 @@ import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import VueI18n from 'vue-i18n';
-import VueElectron from './vue_electron.js';
 import { Button, Drawer, Message, MessageBox, Row, Col, Form,
   FormItem, Input, Menu, MenuItem, Submenu, Dropdown, DropdownItem, DropdownMenu, Select, Option, Tabs, TabPane, Tree, Upload, Dialog } from 'element-ui';
 
 
 Vue.config.productionTip = false;
-if(window.require) Vue.use(VueElectron);
+if(!process.env.VUE_APP_IS_WEB) Vue.use(require('./vue_electron.js'));
 Vue.use(VueI18n);
 
 

src/store/index.js → src/renderer/store/index.js

 import Vue from "vue";
 import Vuex from "vuex";
+import modules from './modules';
 
 Vue.use(Vuex);
 
@@ -19,5 +20,5 @@ export default new Vuex.Store({
     },
   },
   actions: {},
-  modules: {},
+  modules
 });

src/renderer/store/modules/Couner.js

+const state = {
+    main: 0,
+  };
+  
+  const mutations = {
+    DECREMENT_MAIN_COUNTER(state) {
+      state.main -= 1;
+    },
+    INCREMENT_MAIN_COUNTER(state) {
+      state.main += 1;
+    },
+  };
+  
+  const actions = {
+    someAsyncTask({ commit }) {
+      // do something async
+      commit('INCREMENT_MAIN_COUNTER');
+    },
+  };
+  
+  export default {
+    state,
+    mutations,
+    actions,
+  };
+  
\ No newline at end of file

src/renderer/store/modules/index.js

+/**
+ * The file enables `@/store/index.js` to import all vuex modules
+ * in a one-shot manner. There should not be any reason to edit this file.
+ */
+
+ const files = require.context('.', false, /\.js$/);
+ const modules = {};
+ 
+ files.keys().forEach((key) => {
+   if (key === './index.js') return;
+   modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default;
+ });
+ 
+ export default modules;
+ 
\ No newline at end of file

src/views/Course/create.vue → src/renderer/views/Course/create.vue

@@ -59,8 +59,8 @@
 </template>
 
 <script>
-import FullPage from '@/components/scaffold/fullpage.vue';
-import recursion from '@/components/common/recursion.vue';
+import FullPage from '@/renderer/components/scaffold/fullpage.vue';
+import recursion from '@/renderer/components/common/recursion.vue';
 import listJson from '@/demo.json'; //测试数据
 let id = 1000;
 export default {

src/views/Home.vue → src/renderer/views/Home.vue

@@ -78,8 +78,8 @@
 <script>
 // @ is an alias to /src
 import { loginApi } from "@/libs/request/api.js";
-import LiItem from "@/components/Home/li-item.vue";
-import ToolItem from "@/components/Home/tool-item.vue";
+import LiItem from "@/renderer/components/Home/li-item.vue";
+import ToolItem from "@/renderer/components/Home/tool-item.vue";
 
 export default {
   name: "Home",

src/vue_electron.js → src/renderer/vue_electron.js

-const electron = window.require ? window.require('electron') : {};
+const electron = window.require('electron');
 
 module.exports = {
     install: function(Vue) {

tests/unit/example.spec.js

 import { expect } from "chai";
 import { shallowMount } from "@vue/test-utils";
-import HelloWorld from "@/components/HelloWorld.vue";
+import HelloWorld from "@/renderer/components/HelloWorld.vue";
 
 describe("HelloWorld.vue", () => {
   it("renders props.msg when passed", () => {

vue.config.js

+const TerserPlugin = require("terser-webpack-plugin");
 module.exports = {
   lintOnSave: false,
+  publicPath: process.env.IS_WEB ? './' : '/',
   configureWebpack: {
-    devtool: 'source-map'
+    devtool: 'source-map',
+    // optimization: {
+    //   minimize: true,
+    //   minimizer: [
+    //     new TerserPlugin({ // 要引用 TerserPlugin
+    //       terserOptions: {
+    //         ecma: undefined,
+    //         warnings: false,
+    //         parse: {},
+    //         compress: {
+    //           drop_console: true,
+    //           drop_debugger: false,
+    //           pure_funcs: ['console.log'] // 移除console
+    //         }
+    //       },
+    //     }),
+    //   ],
+    // }
+  },
+  pages: {
+    app: {
+      title: 'FeiDao',
+      entry: 'src/renderer/main.js',
+      template: 'public/index.html',
+      filename: 'index.html'
+    }
   },
   pluginOptions: {
     electronBuilder: {
       preload: 'src/preload.js',
-      // mainProcessFile: 'src/background.js',
+      mainProcessFile: 'src/main/index.js',
+      // mainProcessWatch: ['src/main'],
       // rendererProcessFile: 'src/main.js',
       builderOptions: {
           "productName": 'FeiDao Creation',
+          "appId": "com.example.yourapp",
           // build配置在此处
           // options placed here will be merged with default configuration and passed to electron-builder
           // "publish": [
@@ -19,6 +48,7 @@ module.exports = {
           //     }
           // ],
           "win": {
+              // icon: './public/app.ico',
               "target": [
               "nsis",
               "zip"
@@ -28,8 +58,10 @@ module.exports = {
               "oneClick": false,
               "allowToChangeInstallationDirectory": true,
               "perMachine": true
+          },
+          mac: {
+            // icon: './public/app.png'
           }
-        
       }
     },
   }

yarn.lock

@@ -1237,7 +1237,7 @@
   dependencies:
     "@types/node" "*"
 
-"@types/json-schema@^7.0.5":
+"@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
@@ -1998,7 +1998,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.3, ajv@^6.12.4:
+ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.0, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -6969,7 +6969,7 @@ javascript-stringify@^2.0.1:
   resolved "https://registry.yarnpkg.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz#27c76539be14d8bd128219a2d731b09337904e79"
   integrity sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==
 
-jest-worker@^26.2.1:
+jest-worker@^26.2.1, jest-worker@^26.5.0:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
   integrity sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==
@@ -9998,6 +9998,15 @@ schema-utils@^2.0.0, schema-utils@^2.5.0, schema-utils@^2.6.5, schema-utils@^2.6
     ajv "^6.12.4"
     ajv-keywords "^3.5.2"
 
+schema-utils@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.npmmirror.com/schema-utils/download/schema-utils-3.1.1.tgz?cache=0&sync_timestamp=1637075928327&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fschema-utils%2Fdownload%2Fschema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
+  integrity sha1-vHTEtraZXB2I92qLd76nIZ4MgoE=
+  dependencies:
+    "@types/json-schema" "^7.0.8"
+    ajv "^6.12.5"
+    ajv-keywords "^3.5.2"
+
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
@@ -10084,6 +10093,13 @@ serialize-javascript@^4.0.0:
   dependencies:
     randombytes "^2.1.0"
 
+serialize-javascript@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.nlark.com/serialize-javascript/download/serialize-javascript-5.0.1.tgz#7886ec848049a462467a97d3d918ebb2aaf934f4"
+  integrity sha1-eIbshIBJpGJGepfT2Rjrsqr5NPQ=
+  dependencies:
+    randombytes "^2.1.0"
+
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
@@ -10333,6 +10349,14 @@ source-map-support@^0.5.13, source-map-support@^0.5.19, source-map-support@~0.5.
     buffer-from "^1.0.0"
     source-map "^0.6.0"
 
+source-map-support@~0.5.20:
+  version "0.5.21"
+  resolved "https://registry.npmmirror.com/source-map-support/download/source-map-support-0.5.21.tgz?cache=0&sync_timestamp=1637320298732&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fsource-map-support%2Fdownload%2Fsource-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
 source-map-url@^0.4.0:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.1.tgz#0af66605a745a5a2f91cf1bbf8a7afbc283dec56"
@@ -10348,7 +10372,7 @@ source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.7.3:
+source-map@^0.7.3, source-map@~0.7.2:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
@@ -10806,6 +10830,21 @@ temp-file@^3.4.0:
     async-exit-hook "^2.0.1"
     fs-extra "^10.0.0"
 
+terser-webpack-plugin@4:
+  version "4.2.3"
+  resolved "https://registry.npmmirror.com/terser-webpack-plugin/download/terser-webpack-plugin-4.2.3.tgz?cache=0&sync_timestamp=1636385968704&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fterser-webpack-plugin%2Fdownload%2Fterser-webpack-plugin-4.2.3.tgz#28daef4a83bd17c1db0297070adc07fc8cfc6a9a"
+  integrity sha1-KNrvSoO9F8HbApcHCtwH/Iz8apo=
+  dependencies:
+    cacache "^15.0.5"
+    find-cache-dir "^3.3.1"
+    jest-worker "^26.5.0"
+    p-limit "^3.0.2"
+    schema-utils "^3.0.0"
+    serialize-javascript "^5.0.1"
+    source-map "^0.6.1"
+    terser "^5.3.4"
+    webpack-sources "^1.4.3"
+
 terser-webpack-plugin@^1.4.3, terser-webpack-plugin@^1.4.4:
   version "1.4.5"
   resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz#a217aefaea330e734ffacb6120ec1fa312d6040b"
@@ -10845,6 +10884,15 @@ terser@^4.1.2, terser@^4.8.0:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+terser@^5.3.4:
+  version "5.10.0"
+  resolved "https://registry.npmmirror.com/terser/download/terser-5.10.0.tgz?cache=0&sync_timestamp=1636988229781&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fterser%2Fdownload%2Fterser-5.10.0.tgz#b86390809c0389105eb0a0b62397563096ddafcc"
+  integrity sha512-AMmF99DMfEDiRJfxfY5jj5wNH/bYO09cniSqhfoyxc8sFoYIgkJy86G04UoZU5VjlpnplVu0K6Tx6E9b5+DlHA==
+  dependencies:
+    commander "^2.20.0"
+    source-map "~0.7.2"
+    source-map-support "~0.5.20"
+
 text-table@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"