1. 什么是开发服务器
开发服务器是自动进行编译，启动一个服务端口提供良好的开发环境。
问题：为什么vite开发服务器会请求App.vue,这是什么原因？
浏览器可识别html、js、css后缀文件。如何告诉浏览器以什么格式处理，只需要设置content-Type为application/javascript,将app.vue当作js文件处理，即可运行，也方便后面的更新。
2. 如何实现一套简单的开发服务器？
- 解决
.vue后缀文件的处理 - 对开发服务器的原理层面有一个基础的简单的认识
2.1 使用koa进行开发服务器搭建
具体步骤如下：
-
安装koa ,
npm i koa -
创建文件目录
├─App.vue
├─index.html
├─index.js
├─main.js
App.vue
console.log(' App.vue 已经是编译完成的 ----App.vue')
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite dev server</title>
</head>
<body>
hello vite dev server
<script type="module" src="./main.js"></script>
</body>
</html>
main.js
import "./App.vue";
console.log("main.js");
index.js
const Koa = require("koa"); // 不能用esmodule 必须使用commonjs
const fs = require("fs"); // ./ / npm install yarn add ，如果是原生直接取node中找
const path = require("path");
const app = new Koa(); // const app = new Vue()
// node 最频繁做的事情就是在处理请求和操作文件
// 当请求来临以后会直接进入到use注册回调函数中
app.use(async (ctx) => {
// ctx 上下文 默认是get 有请求体和响应体
// 针对get请求可以这样，post使用body-parse进行解析
console.log("打印***request,response", ctx.request, ctx.response);
if (ctx.request.url === "/") {
// 意味着人家访问 localhost:5173/ 一般采用文件流方式读取
const indexContent = await fs.promises.readFile(
path.resolve(__dirname, "./index.html")
);
console.log("打印***indexContent", indexContent.toString());
ctx.response.body = indexContent;
// 不设置直接以流的形式进行下载 Content-Type: application/octet-stream
ctx.response.set("Content-Type", "text/html");
}
if (ctx.request.url === "/main.js") {
// 意味着人家访问 localhost:5173/ 一般采用文件流方式读取
const mainContent = await fs.promises.readFile(
path.resolve(__dirname, "./main.js")
);
console.log("打印***indexContent", mainContent.toString());
ctx.response.body = mainContent;
// 不设置直接以流的形式进行下载 Content-Type: application/octet-stream
ctx.response.set("Content-Type", "text/javascript");
}
if (ctx.request.url === "/App.vue") {
// 如果是vue文件，会进行字符串替换 mainVueContent.toString().find(template) 进行处理
// AST语法 ====》 Vue.createElement ====> 变成js文件
const mainVueContent = await fs.promises.readFile(
path.resolve(__dirname, "./App.vue")
);
console.log("打印***indexContent", mainVueContent.toString());
ctx.response.body = mainVueContent;
// 不设置直接以流的形式进行下载 Content-Type: application/octet-stream
ctx.response.set("Content-Type", "text/javascript");
}
if (ctx.request.url === "/api/getUserInfo") {
// 请求获取用户信息的接口
// 去数据库找数据返回
}
});
app.listen(5173, () => {
console.log(`
koa v4.1.2 ready in 775 ms
➜ Local: <http://localhost:5173/>
➜ Network: use --host to expose
➜ press h to show help
`);
});
3. vite启动与自己搭建服务器对比
- 使用vite启动
- 使用koa启动
app.listen(5173,()⇒{log})端口监听
- 正常访问网站
localhost:5173 ==⇒ 进入app.use ==⇒ 获取ctx 上下文 可以获取request、response
fs 在node端能用，说明js在不同的宿主环境，赋予一些不同的能力，浏览器中可以使用document.getElementById,是浏览器给予的，如果是原生直接取node中找
将app.vue 当作js进行处理
总结
本文主要介绍Vite搭建开发服务器的过程，能够对开发环境有一个清晰的认识。
