electron-vue 制作 http 应用客户端

关于https声明：由于在制作过程中发现https重定向问题尚未解决，所以只将http客户端相关制作流程开源出来，让大家可以制作属于自己的http页面应用

1.1、下载node ：点击下载最新版本 1.2 、下载vue-cli：

代码语言：javascript复制

shell: npm install -g vue-cli || cnpm install -g vue-cli

1.3、 windows环境下需要的Cmake环境： 点击此链接下载此工具

vs生成工具.png

代码语言：javascript复制

shell: vue init simulatedgreg/electron-vue my-project

注意：需要选择electron-packager 来直接构建自己的客户端应用，如果想持续构建那就选择electron-builder，更多配置问题请参考文档：electron-build 文档

注意.png

说明：这里为啥指明使用yarn，是因为在npm和cnpm下，install会出现electron依赖下载不了的问题，故推荐使用yarn 3.1、下载yarn

代码语言：javascript复制

shell: npm install -g yarn || cnpm install -g yarn

3.2、导包

代码语言：javascript复制

...yourAppProject> yarn  // 说明：在项目目录下输入yarn即可

4.1、修改index.ejs的错误 打开编译器过后发现index.ejs报错，如果不进行修改会让编译报错，此错误显示如下：

index的错误.png

如图所示对齐进行修改：

修改后.png

此BUG已提给官方，详情情况请看此issuse: https://github.com/SimulatedGREG/electron-vue/issues/514

4.2、配置index跳转

跳转配置.png

在此处配置html跳转，即可直接进入对应的url页面。

4.3、删除默认显示

项目目录.png

找到默认显示页面，为保险起见将此两页面内容删除，保留vue最外层标签，其余不变。

代码语言：javascript复制

 shell: npm run build:win32

说明：这里仅针对windows系统来进行客户端生成在package.json里配置有各种系统相对应的配置以及shell指令，如下图所示:

build配置.png

此时注意：会在如下图所示停滞2~5分钟，切勿ctrl c或者关闭cmd，否则build失败

编译过程.png

构建完成：此时可以打开已经生成的应用查看了

build完成.png

查看生成的对应系统的应用

构建完毕的目录.png

打开应用即为跳转过后的页面（此处以QQ为例：http://www.qq.com）

构建完成的应用.png

0 人点赞