Vue项目打包成exe

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就可以访问了

隐藏菜单栏(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()
}