介绍
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将Chromium和Node.js嵌入到其二进制文件中，Electron 允许您维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用程序——无需原生开发经验。
在搭建好vue-cli（脚手架）前提下进行安装与使用，然后将项目进行打包。
npm run build
命令成功后就会在项目中生成dist文件夹
安装
接下来在dist文件夹下打开终端或者在cmd中打开，并且输入如下命令
npm install -g electron 或者 cnpm install -g electron
electron -v 检测是否成功安装
在dist文件夹下新建main.js和packge.json
main.js
const {app, BrowserWindow} =require('electron');//引入electron let win; let windowConfig = { width:800, height:600 };//窗口配置程序运行窗口的大小 function createWindow(){ win = new BrowserWindow(windowConfig);//创建一个窗口 win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html win.webContents.openDevTools(); //开启调试工具 win.on('close',() => { //回收BrowserWindow对象 win = null; }); win.on('resize',() => { win.reload(); }) } app.on('ready',createWindow); app.on('window-all-closed',() => { app.quit(); }); app.on('activate',() => { if(win == null){ createWindow(); } });
packege.json
{ "name": "ylemusic", "productName": "ylemusic", "author": "Yle", "version": "1.0.0", "main": "main.js", "description": "music", "scripts": { "pack": "electron-builder --dir", "dist": "electron-builder", "postinstall": "electron-builder install-app-deps" }, "build": { "electronVersion": "1.8.4", "win": { "requestedExecutionLevel": "highestAvailable", "target": [ { "target": "nsis", "arch": [ "x64" ] } ] }, "appId": "ylemusic", "artifactName": "demo-${version}-${arch}.${ext}", "nsis": { "artifactName": "demo-${version}-${arch}.${ext}" } }, "dependencies": { "core-js": "^2.4.1", "electron-builder": "^20.44.4", "electron-package": "^0.1.0", "electron-updater": "^2.22.1" } }
最后进行测试，输入命令
electron .
打包成软件包
npm install electron-builder
npm install electron-package
执行打包命令：
electron-bulider
提示
vue打包项目及Failed to load resource: net::ERR_FILE_NOT_FOUND问题的解决
在webpack.prod.config.js进行如下修改
output: { path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunkhash].js'), chunkFilename: utils.assetsPath('js/[id].[chunkhash].js'), publicPath:'./' //添加 },
在webpack.base.config.js进行如下修改
output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? "./"+config.build.assetsPublicPath : "./"+config.dev.assetsPublicPath },
最后重新打包即可
