用 html5+js+css vue 开发个桌面应用 -Electron

const { app, BrowserWindow } = require('electron')
const path = require('path');
const url = require('url')

// 保持一个对于 window 对象的全局引用，如果你不这样做，
// 当 JavaScript 对象被垃圾回收， window 会被自动地关闭
let win

function createWindow() {
    // 创建浏览器窗口。
    win = new BrowserWindow({ width: 800, height: 600 })

    // 加载应用的 index.html。
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'dist/index_prod.html'),
        protocol: 'file:',
        slashes: true
    }))
    //win.loadURL('http://localhost:8080')

    // 打开开发者工具。
    win.webContents.openDevTools();

    // 当 window 被关闭，这个事件会被触发。
    win.on('closed', () => {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        // 与此同时，你应该删除相应的元素。
        win = null
    })
}

// Electron 会在初始化后并准备
// 创建浏览器窗口时，调用这个函数。
// 部分 API 在 ready 事件触发后才能使用。
app.on('ready', createWindow)

// 当全部窗口关闭时退出。
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在这文件，你可以续写应用剩下主进程代码。
    // 也可以拆分成几个文件，然后用 require 导入。
    if (win === null) {
        createWindow()
    }
})

// 在这文件，你可以续写应用剩下主进程代码。
// 也可以拆分成几个文件，然后用 require 导入。

const electron = require('electron');
const menuTemplate = require('./menu.js');
const ipcMain = electron.ipcMain;
const app = electron.app;
const Menu = electron.Menu;
const BrowserWindow = electron.BrowserWindow;
//启动页面参数
let loadingParams = {
    width: 580,
    height: 200,
    frame: false,
    show: false
};
//主页面参数
let mainParams = {
    width: 1300,
    height: 780,
    icon: __dirname + '/icon.png',
    // titleBarStyle: 'hidden-inset',
    backgroundColor: '#fff',
    show: false
};

let mainWindow;

function createWindow() {
    mainWindow = new BrowserWindow(mainParams);
    mainWindow.setTitle(require('./package.json').name);

    //setting in .vscode/launch.json
    //测试时可以这么写 但是必须启动静态服务器才行
    if (process.env.NODE_ENV === 'development') {
        console.log('develop');
        mainWindow.loadURL('http://localhost:4000');
        mainWindow.webContents.openDevTools();
    } else {
        //完成后打包时 必须加载生成的静态页才行.
        //这个写法比较好 比上面那个简单些
        mainWindow.loadURL(`file://${__dirname}/client/index.html`);
    }

    //这个监听页面加载完成显示
    mainWindow.webContents.on('did-finish-load', () => {
        mainWindow.show();
        //主页面加载完毕显示,把启动页关闭.
        if (loadingScreen) {
            loadingScreen.close();
        }
    });

    //测试工具 这是我添加的
    mainWindow.webContents.openDevTools();

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}

//创建启动页面
function createLoadingScreen() {
    //这里加了父页面的参数不知道是何用
    loadingScreen = new BrowserWindow(Object.assign(loadingParams, { parent: mainWindow }));

    if (process.env.NODE_ENV === 'development') {
        loadingScreen.loadURL('http://localhost:4000/loading.html');
    } else {
        loadingScreen.loadURL(`file://${__dirname}/client/loading.html`);
    }

    loadingScreen.on('closed', () => loadingScreen = null);
    //这个感觉是没必要的
    loadingScreen.webContents.on('did-finish-load', () => {
        loadingScreen.show();
    });
}

//这是个菜单模版
function createMenu() {
    const menu = Menu.buildFromTemplate(menuTemplate);
    Menu.setApplicationMenu(menu);
}

app.on('ready', () => {
    createLoadingScreen();
    createWindow();
    createMenu();
});

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

loadingScreen.loadURL('http://localhost:4000/loading.html');

"scripts": {
  "start": "electron .",
  "pack": "electron-packager . Anyproxy --out=pack --overwrite --ignore=client/node_modules --icon=icon.icns"
},

npm install --save-dev asar