创建electron+vue项目（vue 一）

1、安装Vue CLI（已安装跳过）

npm install -g @vue/cli

 2、创建vue项目

vue create my-project

3、添加electron-builder

vue add electron-builder

4、启动项目

npm run electron:serve

出现错误

Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
Failed to fetch extension, trying 0 more times
Vue Devtools failed to install: Error: net::ERR_CONNECTION_TIMED_OUT

 修改background.js

 5、添加预加载脚本preload.js。在src下创建preload.js

//根据自己需求
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
    closeApp: () => ipcRenderer.send('close-app'),
    maxApp: () => ipcRenderer.send('max-app'),
    unmaxApp: () => ipcRenderer.send('unmax-app'),
    minApp: () => ipcRenderer.send('min-app'),
    fullScreen: (full) => ipcRenderer.send('full-screen',full),
})

6、创建vue.config.js

module.exports = {
  publicPath: './',
  pluginOptions: {
    electronBuilder: {
      removeElectronJunk: false,
      preload: './src/preload.js',
      builderOptions: {
        "appId": "com.example.app",
        "productName": "项目名",//项目名，也是生成的安装文件名，即.exe
        "copyright": "Copyright © 2021",//版权信息
        "win": {//win相关配置
          "icon": "./src/assets/icon.ico",//图标，当前图标在根目录下
          "target": [
            {
              "target": "nsis",//利用nsis制作安装程序
              "arch": [
                "x64",//64位
              ]
            }
          ]
        },
        "nsis": {
          "oneClick": false, // 是否一键安装
          "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
          "allowToChangeInstallationDirectory": true, // 允许修改安装目录
          "installerIcon": "./src/assets/icon.ico",// 安装图标
          "uninstallerIcon": "./src/assets/icon.ico",//卸载图标
          "installerHeaderIcon": "./src/assets/icon.ico", // 安装时头部图标
          "createDesktopShortcut": true, // 创建桌面图标
          "createStartMenuShortcut": true,// 创建开始菜单图标
          "shortcutName": "mine", // 图标名称
        },
      }
    },
  },
}