vite实现原理-宿主页返回宿主页通俗的讲，宿主页就是vue项目中的html模板，即index.html文件，里面通常

课程目录

宿主页

通俗的讲，宿主页就是vue项目中的html模板，即index.html文件，里面通常包含了vue挂载的节点和主入口js文件，本节讲讲述，vite编译并返回宿主页。

项目准备

搭建一个node服务，以koa为例简单实现一个服务项目目录结构

.
├── index.js
├── index.html
├── nodemon.json
├── package.json

nodemon官网可参考，你也可以直接使用node运行项目。

// index.js
const Koa = require('koa');
const app = new Koa();
const htmlCtxType = 'text/html';
app.use(async (ctx) => {
   const { url } = ctx.request;
   // 读取html内容并返回
   const htmlFile = fs.readFileSync(path.join(__dirname, '/index.html'), 'utf8');
   ctx.type = htmlType;
   ctx.body = htmlFile;
});
app.listen(3000).on('listening', () => {
   console.log('listening on 3000');
});

根据koa官网搭建一个koa服务，利用fs模块的readFilesSync读取index.html内容，使用path模块进行路径的拼接，接着设置Content-type告诉浏览器这是一个html文件,返回这个index.html文件就完成了。修改一下index.html内容，让其有内容输出方便看效果，访问http://localhost:3000/