當然，我們不能光想，而是要去分析，我們開啟chrome瀏覽器的開發者模式，在右側找到 network並點選檢視 該頁面的有關請求，如果沒有在重新整理一下，我們可以看到瀏覽器為了渲染頁面發了三次請求：

• 第一個請求的是'/‘, 伺服器給我們返回了index.html檔案；
• 第二個請求的是'/index.css', 但返回內容還是index.html檔案；
• 第三個請求的是'/skills.jpg', 但返回內容還是index.html檔案；

app.use(ctx => {
  ctx.response.type = 'html';
  ctx.response.body = fs.createReadStream('index.html');
});

　　可以看到，無論我們請求的是什麼內容，因為 我們的靜態伺服器 沒有對 css 和 圖片 型別 進行處理，返回的都是index.html檔案。如何解決呢？

app.use(ctx => {
    const url = ctx.url == '/'  ?  '/index.html' : ctx.url
    const fileType = path.extname( url ).slice(1);
        if (fileType ==='html') {
        ctx.response.type = 'html';
        ctx.response.body = fs.createReadStream('index.html');
    } else if  (fileType ==='
 
css') {
        ctx.response.type = 'css';
        ctx.response.body = fs.createReadStream('index.css');
    } else  if  (fileType ==='jpg')  {
        ctx.response.type = 'image/jpg';
        ctx.response.body = fs.createReadStream('skills.jpg');
    } else {
            ctx.response.body = '檔案不存在';
        }
});

　　可以看到，外部樣式和圖片都正常了，但是其他檔案型別或圖片型別的處理呢？如果我們想再新增一張png的圖片，又會不正常，還得需要去更新程式碼。顯然，在實際工作中，如果所有功能都需要自己去實現的話，效率會很低，不僅會延期，還會有很多未知的bug。有沒有更好的方式呢？

二、解決方案：

　　有經驗的老司機通常會選擇一些靠譜的依賴庫去實現我們常用的功能，對於基於koa開發的web應用，我們一般使用koa-static:

1、安裝
npm install koa-static

2、引入
const KoaStatic = require('koa-static');

3、使用
app.use(KoaStatic('./'));

　　重啟伺服器上，我們看到一切都正常，外部樣式和圖片都能正常展示，而且我們顯示任何型別的圖片，基本都沒問題。