electron nativefier打包网址 electron-winstaller制作安装包

npm 设置镜像仓库

npm config set registry https://registry.npm.taobao.org

npm config get registry  查看设置结果

 

安装nativefier  (nativefier  可直接将网址打包为可执行文件)

npm install nativefier -g

创建目录 myapp  

cd myapp

nativefier --name "testApp" --icon D:\text\favicon.ico http://text.xx/xx 

这个第一次执行会很慢，避免下载不动的问题，建议全局设置npm镜像，electron镜像（electron镜像建议使用huaweicloud，taobao镜像使用中发现有些包缺失）

打包成功生成目录：TestApp-win32-x64  点击目录下testApp.exe可进行访问

 

npm init

安装 electron-packager

npm install --save-dev electron-packager

{
  "name": "appname",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "build": "electron-packager . appname --win --out ./build --arch=x64 --icon=favicon.ico --overwrite --version-string.CompanyName='xx Inc.' --version-string.ProductName='xx系统'", //--ignore=node_modules
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^27.0.3",
    "electron-packager": "^17.1.2",
    "electron-winstaller": "^5.2.0"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  }
}

main.js

if (require('electron-squirrel-startup')) return;//加上这一句，生成安装包，安装后可生成桌面快捷方式 npm i electron-squirrel-startup --save ，打包需要包含node_modules

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

// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，
// window 会被自动地关闭
var mainWindow = null;

// 当所有窗口被关闭了，退出。
app.on('window-all-closed', function () {
    // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前
    // 应用会保持活动状态
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候
// 这个方法就被调用
app.on('ready', function () {
    // 创建浏览器窗口。
    //mainWindow = new BrowserWindow({ width: 800, height: 600 });
    
    //打开后全屏
    mainWindow = new BrowserWindow({show: false, autoHideMenuBar: true,movable:false,fullscreen:true,resizable:false,frame:false,

webPreferences: {
webSecurity: false, // 如果需要跨域，请打开注释
//contextIsolation: false, // 设置此项为false后，才可在渲染进程中使用electron api
//nodeIntegration: true, // node模块
},

});

    mainWindow.setTitle("xx系统");
    mainWindow.maximize();
    mainWindow.show();

    // 加载url
    //mainWindow.loadURL("http://www.baidu.com");
    //加载本地html文件
    mainWindow.loadURL(url.format({
        pathname: path.join(__dirname, 'center/index.html'),
        protocol: 'file:',
        slashes: true
    }));

    // 打开开发工具
    // mainWindow.openDevTools();

    // 当 window 被关闭，这个事件会被发出
    mainWindow.on('closed', function () {
        // 取消引用 window 对象，如果你的应用支持多窗口的话，
        // 通常会把多个 window 对象存放在一个数组里面，
        mainWindow = null;
    });
});

 

安装electron-winstaller (https://www.npmjs.com/package/electron-winstaller)

npm install --save-dev electron-winstaller

创建一个build.js

var electronInstaller = require('electron-winstaller');
var path = require("path");

resultPromise = electronInstaller.createWindowsInstaller({
    appDirectory: path.join('./TestApp-win32-x64'), //上面nativefier生成的打包文件的路径
    outputDirectory: path.join('./release'), //输出路径
    authors: 'zl', // 作者名称
    description: '描述',// 新版必须
    exe: 'TestApp.exe', //在appDirectory配置目录下寻找可执行的exe文件
    noMsi: true, //不需要msi
    setupIcon:'./favicon.ico', //生成的exe文件的图标文件地址
    setupExe:'testApp-setup-1.0.0.exe', //生成的安装包名称
    title:'我的app', 
    loadingGif:'./loading.gif'
});

resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));

 执行 node build.js，release目录下会生成exe安装文件

附上镜像配置：

npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm config set disturl https://mirrors.huaweicloud.com/nodejs/
npm config set electron_mirror https://mirrors.huaweicloud.com/electron/

npm config set registry https://registry.npmmirror.com
npm config set disturl https://registry.npmmirror.com/dist
npm config set electron_mirror https://registry.npmmirror.com/electron/

想用淘宝镜像的直接用cnpm吧

yarn配置：

yarn config set registry https://mirrors.huaweicloud.com/repository/npm/
yarn config set disturl https://mirrors.huaweicloud.com/nodejs/
yarn config set electron_mirror https://mirrors.huaweicloud.com/electron/

yarn config set registry https://registry.npmmirror.com
yarn config set disturl https://registry.npmmirror.com/dist
yarn config set electron_mirror https://registry.npmmirror.com/electron/

electron镜像建议使用huaweicloud，taobao镜像(新地址：https://registry.npmmirror.com)，注意淘宝镜像见到过有各种不同设置，直接用cnpm吧