7：Vite处理Vue文件原理

可以在 network 中看到浏览器直接加载了 App.vue 这个文件，那么为什么可以直接加载 App.vue 呢，这是因为服务端遇到了以 vue 后缀结尾的文件时，在服务端会去读取这个文件，然后去查找 template，script 等关键字，最后以字符串的形式去处理截取替换等，然后最重要的是在返回的时候 设置相应类型，最后让浏览器强制以 js 的形式去处理。

下面是一段伪代码

app.use(async ctx => {
  if(ctx.request.url === "请求的文件的路径") {
    const content = await fs.promises.readFile(path.resolve(__dirname, "本地文件路径")); // 在服务端一般不会这么用
    ctx.response.body = content;
    ctx.response.set("Content-Type", "text/javascript");  
  }
})

可以看到 App.vue 都被处理成了js文件。