1.在app.js文件中設置靜態文件托管
/*應用程序入口文件*/
/*加載express模塊*/
var express = require('express');
/*加載模板處理模塊*/
var swig = require('swig');
/*創建app應用*/
var app = express();
/*設置靜態文件托管*/
/*當用戶訪問的url以/public開始，那么直接返回public目錄下的文件*/
app.use('/public',express.static(__dirname + '/public'));
/*配置應用模板 第一個參數：html為當前應用所使用的模板引擎 第二個參數：用於解析處理模板內容的方法*/
app.engine('html',swig.renderFile);
/*設置模板文件存放目錄 第一個參數：必須是views 第二個參數：目錄路徑*/
app.set('views','./views');
/*注冊所使用的模板引擎(默認引擎) 第一個參數：必須是view engine 第二個參數：app.engine的第一個參數*/
app.set('view engine','html');
/*在開發過程中，取消模板緩存*/
swig.setDefaults({cache: false});
/*首頁*/
app.get('/',function (req,res,next) {
/*讀取view目錄下的指定文件，解析並返回給客戶端*/
res.render('index');
});
/*監聽http請求*/
app.listen(8099);
2.在public目錄下創建main.css文件
body{
background: blue;
}
3.在index.html文件中引用main.css
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首頁</title>
<link rel="stylesheet" type="text/css" href="/public/main.css">
</head>
<body>
<h1>歡迎！！！</h1>
</body>
</html>
效果
