这篇文章主要介绍了关于vue+electron实现简单桌面应用，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
之前一直使用C#编写桌面应用，也顺带写一些Web端应用。最近在看node时发现常用的vscode是用electron编写的，一种想吃螃蟹的念头就涌了上来。
在网上找了找electron的资料，也研究了一下官方文档，发现electron app其实就是一个chrome浏览器，UI全部都是使用web端技术编写的，因为之前一直使用Vue来写Web应用，所以自然就想到Vue+Electron的组合。
在网上找了找，居然有现成的轮子Electron-Vue，立即install使用，可是发现最后却不那么如人意，在最后build时，总是出错，后来终于发现是网络与build配置的问题。搞得人很头疼。
于是最后决定自己动手，将Vue生成的静态网页与Electron结合。
立即学习“前端免费学习笔记（深入）”；
1.Vue使用webpack项目，build之后在dist文件夹中会有静态网页生成，这样生成的网页放在web容器中可以正确访问，但如果在本地直接打开引用文件路径会出错，后来发现是因为生成后的index.html与资源不在一个目录层。
修改webpack项目中config/index.js为
功能简介：1.用户留言功能2.用户定货功能3.定制货货功能4.定制网页样式和其实设置(比如主页)5.强大的管理功能(现在的程序都是管理功能大于应用功能:)6.管理功能支持查看订货单，留言，分页，删除等功能管理页面：login.asp管理密码：admin
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',2.使用electron-quick-start快速构建出一个electron项目，将上面生成的文件复制到electron项目的根目录下，运行项目，发现正常运行。
3.可是上一步仅仅是在dev模式下运行，这里使用electron-builder分发项目，全局安装electorn-builder后，输入electron-builder --win --ia32 --dir即可完成项目的分发。
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
