Electron-vue-打包桌面操作-流程

9次阅读

共计 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 文件 就可以了!!!!!

正文完
 0