Vue+Electron实现简单桌面应用

2018-07-09 13:47:33来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

之前一直使用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 build: {
2     // Template for index.html
3     index: path.resolve(__dirname, '../dist/index.html'),
4 
5     // Paths
6     assetsRoot: path.resolve(__dirname, '../dist'),
7     assetsSubDirectory: 'static',
8     assetsPublicPath: './',

2.使用electron-quick-start快速构建出一个electron项目,将上面生成的文件复制到electron项目的根目录下,运行项目,发现正常运行。

3.可是上一步仅仅是在dev模式下运行,这里使用electron-builder分发项目,全局安装electorn-builder后,输入electron-builder --win --ia32 --dir即可完成项目的分发。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:关于闭包

下一篇:深入理解js的变量提升和函数提升