使用nodejs express渲染html文件！
第一步：app.js文件：
//应用程序的启动入口文件
var express =require('express');
//app = nodejs中的http.createserver();
var app = express();
//加载模版处理模块
var swig = require('swig');
//定义当前应用所使用的模版引擎
//第一个参数表示模版引擎的名称，同时也是模版文件的后缀，第二个参数表示用于处理模版内容的方法
app.engine('html',swig.renderFile);
//设置模版文件存放的目录，第一个参数必须是views，第二个参数是目录
app.set('views','./views');
//注册所使用的模版引擎，第一个参数必须是view engin，第二个参数和app.engine这个方法中定义模版引擎的名称（第一个参数）是一致的
app.set('view engine','html');
//在开发过程中取消模版缓冲
swig.setDefaults({cache:false});
app.get('/',function(req,res,next){
//res.send('欢迎来到');
// 读取views目录下的指定文件，解析并返回给客户端
// 第一个参数：表示模版的文件，相对于views目录 views/index.html
//第二个参数表示传递给模版使用的数据
//首页渲染index.html
res.render('index');
});
app.listen(8081);
第二步：在views文件夹下创建文件index.html
index.html文件：
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//static.codepen.io/assets/editor/live/console_runner-1df7d3399bdc1f40995a35209755dcfd8c7547da127f6469fd81e5fba982f6af.js'></script><script src='//static.codepen.io/assets/editor/live/css_reload-5619dc0905a68b2e6298901de54f73cefe4e079f65a75406858d92924b4938bf.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//static.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//static.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/alvaromontoro/pen/PXNLgP" />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display: flex;
}
.frame > div {
flex: 1;
font-size: 0;
font-weight: bold;
line-height: 400px;
background: #f72;
text-transform: uppercase;
text-align: center;
color: rgba(255, 255, 255, 0);
transition: all 0.5s;
}
.frame > div:hover {
flex: 6;
font-size: 2rem;
color: white;
}
.frame > div:nth-child(2n) {
background: #444;
}
</style></head>
<body>
<div class="frame">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
<script src='//static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js'></script><script src='https://100dayscss.com/codepen/js/jquery.min.js'></script>
<script >// jQuery v3.3.1 is supported
//# sourceURL=pen.js
</script>
</body></html>