提前准备一个vue项目，或者你可以使用最初的vue项目

vue初始化webpack

有些会在安装后报告错误，可以忽略。成功启动npm运行开发

下载vue项目下的以下依赖项，这些依赖项将被使用

cnpm install electronic-save-devcnpm install electronic-packager-save-dev//这是一个以exe文件形式键入的插件，应该稍后使用，并提前下载，以获取electronic的资源

git clone https://github.com/Electron/e.cd electronic-quick-startcnpm install//这里我用的是cnpm，npm太慢了，无法将electronic获得的main.js复制到vue中构建，并修改为electron.js

然后修改

将资产公共路径： '/'更改为的目的。/是获得准确的路径

然后修改electron.js

将其更改为此路径名：path.join (_ _ dirname，'./dist/index.html ')

如果你不明白，你可以搜索vue的dist

完成这些更改后，配置package.json

用于启动npm运行abc

启动成功是

成功启动后，您可以执行下一步

在配置包. json包中

简要介绍电子包装机的结构。

电子打包程序source dir app name-platform=platform-arch=arch[可选标志.] sourcedir资源路径，在本例中为两者。/dist/

由appname打包的exe的名称

平台平台名称(windows是win32)

拱形版本，在本例中为x64

它不在这里，因为还有坑

我会跳过坑

将bulid的e . js文件复制到dist中，将package.json复制到其中(建议dist文件及其内容自动生成，无需自己创建)

然后修改electron.js

main window . load URL(URL . format({ path name : path . join(_ dirname，' index.html ')，protocol:' file3360 '，slashes:true })并修改复制到dist的package.json

当您再次启动npm run go时，将出现一个打包成功的文件夹

再从里面找exe文件！

摘要

以上是边肖介绍的Electron vue包装桌面操作流程的详细说明，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！