npm config edit

electron_mirror=https://npm.taobao.org/mirrors/electron/
electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

npm install electron -g

vue add electron-builder

npm run serve    網(wǎng)頁運(yùn)行
 
npm run electron:serve   網(wǎng)頁運(yùn)行并打開客戶端運(yùn)行
 
npm run electron:build   構(gòu)建打包客戶端-會在根目錄生成dist_electron文件夾
                         其中的XXX Setup XXX.exe就是安裝包
 
                         需要打包別的平臺，macOS,Linux等，去electron官網(wǎng)看看就知道了，簡單的

根目錄下 vue.config.js文件
使用時候請去掉里面的注釋，不然跑不起來。
我下面引入的圖片里面有一個build/logo.ico的文件，這個文件大小必須是256*256的
然后這個build的目錄在項(xiàng)目根目錄下創(chuàng)建，圖片放進(jìn)去就行
module.exports = {
	pluginOptions: {
		electronBuilder: {
			builderOptions: {
				nsis: {
				  allowToChangeInstallationDirectory: true,
				  oneClick: false,
				  installerIcon: "./build/logo.ico",  //安裝logo
				  installerHeaderIcon: "./build/logo.ico" //安裝logo
				},
				electronDownload: {
					mirror: "https://npm.taobao.org/mirrors/electron/" //鏡像設(shè)置
				},
				win: {
					icon: './build/logo.ico' //打包windows版本的logo
				},
				productName: "應(yīng)用名稱",  //應(yīng)用的名稱
			}
		}
	},
}

"build": {
    "productName":"xxxx",		//項(xiàng)目名 這也是生成的exe文件的前綴名
    "appId": "com.xxx.xxxxx",	//包名  
    "copyright":"xxxx",			//版權(quán)信息
    "directories": { 			//輸出文件夾
      "output": "build"
    }, 
    "nsis": {	//nsis相關(guān)配置，打包方式為nsis時生效
      "oneClick": false, 								// 是否一鍵安裝
      "allowElevation": true, 							// 允許請求提升，如果為false，則用戶必須使用提升的權(quán)限重新啟動安裝程序。
      "allowToChangeInstallationDirectory": true, 		// 允許修改安裝目錄
      "installerIcon": "./build/icons/aaa.ico",			// 安裝圖標(biāo)
      "uninstallerIcon": "./build/icons/bbb.ico",		//卸載圖標(biāo)
      "installerHeaderIcon": "./build/icons/aaa.ico", 	// 安裝時頭部圖標(biāo)
      "createDesktopShortcut": true, 					// 創(chuàng)建桌面圖標(biāo)
      "createStartMenuShortcut": true,					// 創(chuàng)建開始菜單圖標(biāo)
      "shortcutName": "xxxx", 							// 圖標(biāo)名稱
      "include": "build/script/installer.nsh", 			// 包含的自定義nsis腳本
    },
    "publish": [
      {
        "provider": "generic", 		// 服務(wù)器提供商，也可以是GitHub等等
        "url": "http://xxxxx/" 		// 服務(wù)器地址
      }
    ],
    "win": {
      "icon": "build/icons/aims.ico",
      "target": [
        {
          "target": "nsis",			//使用nsis打成安裝包，"portable"打包成免安裝版
          "arch": [
            "ia32",				//32位
            "x64" 				//64位
          ]
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "linux": {
      "icon": "build/icons"
    }
  }

app.on('ready', async () => {
    //這里注釋掉，沒啥用
	// if (isDevelopment && !process.env.IS_TEST) {
	// 	// Install Vue Devtools
	// 	try {
	// 		await installExtension(VUEJS_DEVTOOLS)
	// 	} catch (e) {
	// 		console.error('Vue Devtools failed to install:', e.toString())
	// 	}
	// }
	createWindow()
	// 隱藏菜單欄
	const {
		Menu
	} = require('electron');
	Menu.setApplicationMenu(null);
	// hide menu for Mac 
	if (process.platform !== 'darwin') {
		app.dock.hide();
	}
})

const win = new BrowserWindow({
		width: 1000,
		height: 800,
		title: '標(biāo)題',
		webPreferences: {
			// Use pluginOptions.nodeIntegration, leave this alone
			// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
			nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
			contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
		}
	})

    "nsis":{
      "oneClick" : false,
      "allowToChangeInstallationDirectory" : true
    },