node 当前版本 v12.2.0 ，v14.0.0及以上提示version不一致的问题，所以只能降级
electron v8.2.3 目前是最高的版本，亲试有用
1.安装vue3.0以上版本，目前最新版本v4.3.1
npm i @vue/cli -g
在终端输入
vue create vue-test
按照提示直到安装完成
2.进入vue-test目录下
npm install [email protected] --save-dev
这步安装比较慢，目前cnpm淘宝源上还没有最新版，所以耐心等待
3.新建vue.config.js,贴入如下代码块
module.exports = {
// indexPath:'./', // vue3.0以上已经废弃
publicPath:'./' ,// 启动是页面出现空白，修改此配置，原先默认'/'修改为'./'
outputDir:'public/dist',
chainWebpack: config => { //修改webpack打包的入口文件。需要在根目录建两个对应入口js文件
config.entry('app').clear().add('./src/renderer/main.js')
}
};
4.新建主程序文件main.js ,目录如下./public/main.js
const {app, BrowserWindow} =require('electron');//引入electron
const loadUrl = process.env.NODE_ENV === 'development' ? `http://localhost:8080` : `file://${__dirname}/dist/index.html`
let win;
let windowConfig = {
width:800,
height:600
};//窗口配置程序运行窗口的大小
function createWindow(){
win = new BrowserWindow(windowConfig);//创建一个窗口
win.loadURL(loadUrl );//在窗口内要展示的内容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();
}
});
5.新建package.json
{
"name": "vue-test.",
"version": "0.1.0",
"main": "public/main.js",
"private": true,
"scripts": {
"start": "cross-env NODE_ENV=development nodemon --watch public/main.js --exec electron .",
"pack": "electron-builder --dir",
"win32": "npm run build && electron-builder --win --ia32",
"serve": "vue-cli-service serve",
"dev": "npm run build && npm run start",
"build": "cross-env NODE_ENV=production vue-cli-service build",
"lint": "vue-cli-service lint"
},
"build": {
"productName": "vue-test.exe",
"appId": "vue-test",
"copyright": "xxxx",
"directories": {
"output": "build"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true
},
"publish": [
{
"provider": "generic",
"url": "http://160.9.225.11:3000/"
}
],
"files": [
"dist/**/*",
"./public/main.js"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
]
},
"linux": {
"icon": "build/icons"
}
},
"dependencies": {
"core-js": "^3.6.4",
"electron-asar-hot-updater": "^0.1.3",
"nan": "^2.14.1",
"node-fetch": "^2.6.0",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.3.0",
"@vue/cli-plugin-eslint": "~4.3.0",
"@vue/cli-service": "~4.3.0",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.2",
"electron": "^8.2.3",
"electron-builder": "^22.5.1",
"electron-log": "^4.1.1",
"electron-rebuild": "^1.10.1",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"iconv-lite": "^0.5.1",
"nodemon": "^2.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
QQ图片20200506221715.png
7.安装electron-builder
npm install electron-builder --save-dev
输入打包命令：
npm run win32
出现如下错误
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
(node:18068) ExperimentalWarning: The fs.promises API is experimental
• electron-builder version=22.5.1 os=10.0.17763
• loaded configuration file=package.json ("build" field)
• description is missed in the package.json appPackageFile=D:\infoharbor\package.json
• author is missed in the package.json appPackageFile=D:\infoharbor\package.json
• writing effective config file=build\builder-effective-config.yaml
• packaging platform=win32 arch=ia32 electron=8.2.3 appOutDir=build\win-ia32-unpacked
⨯ Application entry file "public\main.js" in the "D:\infoharbor\build\win-ia32-
unpacked\resources\app.asar" does not exist. Seems like a wrong configuration. stackTrace=
Error: Application entry file "public\main.js" in the "D:\infoharbor\build\win-ia32-
unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.
at error (D:\infoharbor\node_modules\app-builder-lib\src\asar\asarFileChecker.ts:7:12)
at checkFileInArchive (D:\infoharbor\node_modules\app-builder-
lib\src\asar\asarFileChecker.ts:33:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] win32: `npm run build && electron-builder --win --ia32`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] win32 script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\binbin.song\AppData\Roaming\npm-cache\_logs\2020-04-24T12_47_47_479Z-debug.log
原因是打包的.asr文件中找不到主程序的入口文件public/main.js
解决方法，在项目更目录新建public文件夹，把electron的主进程文件main.js 移到public文件夹下，
和第三步中outputDir:'public/dist',要一起配置才能生效
到此，重新打包即可成功。
nodejs addons的的例子见https://www.jianshu.com/p/ce89f8407e8b