共计 1020 个字符,预计需要花费 3 分钟才能阅读完成。
提前准备一个 vue 项目,也可以使用初始的 vue 项目
vue init webpack
安装到后边有的会出现报错,可以忽略,启动 npm run dev 启动成功就可以
在 vue 项目下执行下载以下依赖,会用到
cnpm install electron –save-dev
cnpm install electron-packager –save-dev // 这个是打成 exe 文件的插件,之后要用,提前下载好
获取 Electron 的资源
git clone https://github.com/electron/e…
cd electron-quick-start
cnpm install // 这里我用的是 cnpm,npm 太慢了
将 Electron 获取到资源的 main.js 复制到 vue 里面的 bulid 里面并修改为 electron.js
然后修改
将 assetsPublicPath: ‘/’ 改为./,都是为了获取准确的路径
然后再修改 electron.js
改为 这个 pathname: path.join(__dirname, ‘../dist/index.html’)
不懂的可以去搜 vue 的 dist
这些改好了之后配置 package.json
用来启动 npm run abc
启动成功为
启动成功可以执行下一步
在配置打包的 package.json
关于 electron-packager 的配置,简单介绍一下。
electron-packager <sourcedir> <appname> –platform=<platform> –arch=<arch> [optional flags…]
sourcedir 资源路径,在本例中既是./dist/
appname 打包出的 exe 名称
platform 平台名称(windows 是 win32)
arch 版本,本例为 x64
到这里还没有完因为还有坑呢
我就把坑跳过
将 bulid 的 electron.js 文件复制到 dist 中,将 package.json 也复制到当中(提示 dist 文件和里面内容自动生成不用自己创建)
然后修改 electron.js
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}))
再修改复制到 dist 中的 package.json
再启动 npm run go 会出现打包成功的文件夹
再从里面寻找 exe 文件 就可以了!!!!!