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 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便可完成项目的分发。

转载请注明出处:http://www.javashuo.com/article/p-bkjhlxko-w.html