Vue项目打包成exe
实现思路:从electron官网上拉取代码,把官网上拉取下来项目中的index.html替换成 自己vue项目打包好的dist文件中的index.html,输入打包exe的命令即可
1.拉取electron官网上的demo,拉下来之后安装依赖,项目跑起来之后,就不用管demo了,开始配置自己的Vue项目
git clone https://github.com/electron/electron-quick-start
npm i
然后进入到electron-quick-start中
npm install electron -g -S
npm run start
'''
会跳出一个demo窗口就不用去管它最小化即可
'''
2.修改自己项目的vue.config.js,路径必须修改为 ./,不是这个后续打包好的页面可能会出现白屏,加载不出来的情况
module.exports = {
publicPath: './',
}
3.打包自己的Vue项目,这步应该很熟了,将打包出来的 dist 文件夹复制到之前拉取的electron-quick-start文件夹中
打包命令 npm run build
4.在electron-quick-start项目中,下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
5.进入electron-quick-start项目,删除项目根目录下的 index.html 文件
6.在electron-quick-start项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html(替换成我们的文件非常非常的重要,注意行数,一般都在16行多一点)
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')
7.在electron-quick-start项目中,进入 package.json ,在 scripts 中添加 packager 指令,如下所示:
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
}
8.运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件
打包命令npm run packager
9.打包完以后,项目中会出现 App-win32-x64文件夹,进去之后,双击App.exe就可以访问了
![](https://s1.ax1x.com/2022/11/04/xLSFX9.png)
隐藏菜单栏(electron-quick-start中的main.js)
// Modules to control application life and create native browser window
const {app, BrowserWindow,Menu} = require('electron') // 添加Menu
const path = require('path')
function createWindow () {
//隐藏菜单 Menu.setApplicationMenu(null) // 加入这句即可
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// and load the index.html of the app.
mainWindow.loadFile('index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()}
其他配置(electron-quick-start中的main.js)
const {app, BrowserWindow, Menu, globalShortcut} = require('electron')
const path = require('path')
function createWindow() {
// Create the browser window.
Menu.setApplicationMenu(null)
const mainWindow = new BrowserWindow({
width: 1100,
height: 800,
frame: false, // 创建无边框窗口
// transparent: true, //通过将 transparent 选项设置为 true, 还可以使无框窗口透明
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 全屏
mainWindow.setFullScreen(true);
// Esc退出全屏
globalShortcut.register('ESC', () => {
mainWindow.setFullScreen(false);
})
// and load the index.html of the app.
mainWindow.loadFile('./dist/index.html')
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
标签:index,exe,html,start,electron,Vue,mainWindow,打包
From: https://www.cnblogs.com/chunyouqudongwuyuan/p/16857069.html