Vue项目打包exe-Electron

开发过程中遇到一个需求，公司之前vue写的前端，使用uniapp可以打包Android版本的，可是目前客户只有windows的设备，无奈只好考虑第三方框架，这里用到的是Electron。

Electron是使用JavaScript Html Css构建跨平台的桌面应用程序框架，它兼容了mac window linux三个平台。

关于Electron有两种打包方式

1. 将我们自己的项目打包到官方的demo中，修改路径即可，方式便捷

2. 在项目中添加electron插件，然后打包

第一步:下载官网demo，这里简单该项目为A

[git clone https://github.com/electron/electron-quick-start](url)

第二步：首先修改公共路径，将vit.config.js中的publicPath的值,修改为publicPath:"./" 确保打包后出现白屏的问题

第三步：打包项目获取dist， 执行npm run build

第四步：将打包的项目dist放到下载的A项目的根目录下

第五步：修改main.js中的路径,删除根目录下的index.html
修改之前：mainWindow.loadFile('index.html')
修改之后：mainWindow.loadFile("./dist/index.html")

第六步:检查package.json,查看devDependencies,这里我修改下
修改之前"devDependencies": { "electron": "^33.1.0" }
修改之后"devDependencies": { "electron": "^21.4.4" }
这里修改版本号是为了保障兼容win7系统

第七步：下载依赖推荐使用 cnpm i
执行：cnpm install --save-dev electron@21.4.4
           cnpm install --save-dev electron-packager

第八步：配置打包命令。在package.json的script中添加如下 命令

"scripts": {
    "start": "electron .",
    "packager": "electron-packager . 应用名 --platform=win32 --arch=ia32 --out=./out --asar --icon=./icons/icon.ico --app-version=0.0.1 --overwrite --ignore=node modules"
 }

    说明：应用名：打包后显示的exe的名称
              platform：打包的应用平台，win32说明是windows系统，还有darwin代表macos系统,linxu代表linux平台
               out：打包输出的路径，生成的文件在以及环境在该目录下
               icon：可设置左上角的图标，windows下需要的是ico格式的图片，mac下需要的是icns格式的图片
到这里就配置完成了,可以直接跳过第九步运行或者打包

第九步：优化配置main.js,

const {
	app,
	BrowserWindow,
	Menu
} = require('electron')

function createWindow() {
	// Create the browser window.
	Menu.setApplicationMenu(null) // 取消菜单栏
	const mainWindow = new BrowserWindow({
		width: 800,
		height: 600,
		closable: true, // 是否可以关闭
		fullscreenable: true, // 是否可以全屏
		webPreferences: {
			nodeIntegration: true,
			contextIsolation: false,
			webSecurity: false, // 文件本地访问
			enableRemoteModule: true, // 可以使用remote
			preload: path.join(__dirname, 'preload.js')
		},
		frame:true
	})
	mainWindow.loadFile('./dist/index.html')
}

这里取消菜单栏设置,设置可以全屏....

第十步：最终之战
              运行 cnpm run start
              打包：cnpm run packager
说明：初次会比较慢，网络不佳也会导致失败，不要灰心，多次执行就好，坚持就是胜利
打包之后再跟目录的out中就有免安装的exe，可以直接运行，这里注意若到其他windows下执行需要将out目录下的整个文件都移动过去，否则却是环境文件无法运行
若需要可以执行安装文件，这里推荐使用innosetup

##

参考

花开花落