因为某些原因,需要编写一个纯前端的页面部署在展示触摸屏上。一开始我是用express提供端口服务,需要在打包后的dist文件夹中加入一个serve.js文件用于启动,原理我也不懂,我就用,反正能用,加入了这段代码以后,在控制台输入"node serve"命令就可以把程序开起来了。

var express = require('express');
 var app = express();
 const hostname = 'localhost';
 const port = 8080;
 app.use(express.static('./'));
 app.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}`);
 });

一开始我觉得这样比较方便了,奈何部署的展示屏会经常关机,每次开机就需要重新打开项目,这样来开整体就比较繁琐了,再加之要求一键启动,我就开始了我的求索之旅。

1.使用vue+electron,electron大概是一个可以将vue项目打包成exe文件的库,但是在我查阅资料和自己操作的过程中,我发现非常麻烦,而且打包完成后的项目仍然没有打开端口,所以困扰了我一周时间不知道该如何解决。

2.在和其他人交流的时候,聊到bat脚本,于是我就转变了想法,转而使用bat脚本来分两步打开项目。

2.1将dist文件部署在tomcatwebapps下,并且改名"ROOT",这样打开bin目录下的startup.bat脚本就可以打开端口了

2.2因为在展示屏上面需要全屏展示,并且不能让用户推出全屏,我就设计了一个点击即可进入全屏,且只能通过"CTRL+F4"退出。

借助“–kiosk”参数实现:右键谷歌浏览器进入属性,在目标的最后增加“ --kiosk www.xxxxxx.com”即可。

2.3使用tomcat作为vue项目服务器。

2.4编写bat脚本,先打开tomcat服务器,再打开指向项目地址的浏览器。

@echo off
cd D:\Users\weixiaowei\Desktop\apache-tomcat-9.0.22\bin
call startup.bat & ping 120.0.0.1 -n 1
start "" "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe"

2.4.1打开bat脚本只能cd到文件目录下才可以使用"call"命令打开;

2.4.2使用"ping"命令访问本机IP地址,该命令在执行后一秒才能执行其他命令,在此处的作用是给tomcat打开一个时间;

2.4.3使用"start"命令打开重新指向新地址的Chrome浏览器。