纯前端项目部署的一些问题

因为某些原因，需要编写一个纯前端的页面部署在展示触摸屏上。一开始我是用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浏览器。

参考地址：bat脚本批量启动程序_Jeff的博客-优快云博客_bat脚本启动程序