vue-cli4 + Electron打包成桌面程序
首先，完成了一个名为‘demo1’的vue-cli4项目，在根目录下创建一个vue.config.js文件：
module.exports = {
runtimeCompiler:true,
publicPath: './' //主要要这个玩意
}
在项目根目录下新建 preload.js，内容可以为空
主要用来在创建桌面窗口前定义一些window全局变量。可根据项目自行定义。如：window.isElectron = true
在项目中进行判断是否为桌面程序打开，可以调用electron的一些api
接下来 git clone https://github.com/electron/electron-quick-start.git得到electron-quick-start
cd electron-quick-start
npm install
npm start
执行成功后如图：
然后在demo1项目中执行npm install electron-packager --save-dev npm install electron --save-dev
注意： 如果npm install electron --save-dev执行太久可以尝试如下方法
- 去以下链接下载electron-v6.0.12-darwin-x64.zip和SHASUMS256.txt
https://github.com/electron/electron/releases/tag/你要安装的版本号
//列入https://github.com/electron/electron/releases/tag/v10.1.13
2.下载好之后，把文件拷贝到相应的目录下。
Linux系统: $XDG_CACHE_HOME或~/.cache/electron/
MacOS系统: ~/Library/Caches/electron/
Windows系统: $LOCALAPPDATA/electron/Cache或~/AppData/Local/electron/Cache/
以win10为例：
然后先别急执行npm install electron --save-dev，将electron-quick-start中的main.js拷贝到demo1根目录下，并更名为electron.js，然后改变electron.js里面文件：
function createWindow () {
// 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('./assets/index.html') //改这里
// Open the DevTools.
// mainWindow.webContents.openDevTools()
}
demo1项目package.json文件中增加两条指令：
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"lint": "vue-cli-service lint",
//增加下面两条
"electron_dev": "npm run build && electron electron.js",
"electron_build": "electron-packager ./dist demo001 --platform= 'win32' --arch=x64 --icon=./dist/favicon.ico --overwrite"
},
注意： "electron_build"：“electron-packager
-
sourcedir: 资源(dist/package.json)路径，在本例中既是./dist/
-
appname: 打包出的exe名称
-
platform :平台名称（windows是win32）
-
arch: 版本，本例为x64
然后执行npm run build 生成dist目录，复制electron.js、preload.js到dist目录中，并修改electron.js路径
function createWindow () {
// 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中的package.json到dist目录中,注意修改路径
{
"name": "demo007",
"version": "1.0.0",
"description": "A minimal Electron application",
"main": "electron.js", //改这里
"scripts": {
"start": "electron ."
},
"repository": "https://github.com/electron/electron-quick-start",
"keywords": [
"Electron",
"quick",
"start",
"tutorial",
"demo"
],
"author": "GitHub",
"license": "CC0-1.0",
"devDependencies": {
"electron": "^10.1.3"
}
}
最后执行npm run electron_build，可以看到项目目录中多了一个demo001-win32-x64文件，找到里面的demo001.exe运行即可
这篇是博主实操经验，因为项目时间赶，所以对electronjs没有多了解， 接下来咱们就一起去了解electronjs吧！！！