vite如何处理项目中的资源 - 教程

web开发服务器

实现简易的开发服务器

1. 初始化项目

## 新建文件夹
vite_dev_server
## 初始化工程
npm init -y
## 安装服务框架
npm i koa
## 新建入口文件
index.js
## 新增启动脚本
{
  "scripts": {
    "dev": "node index.js"
  }
}

const Koa = require("koa")
const app = new Koa()
// 接收到请求后触发use注册的回调函数
app.use((ctx) => {
  // ctx: 请求上下文;  request: 请求信息;  response:响应信息;
  console.log("ctx", ctx.request, ctx.response);
})
// 启动服务
app.listen(5173, () => {
  console.log("vite dev serve liste on 5173");
})

1. 新建index.html页面返回给浏览器

  
  
  


  hello! my is node sever.

const Koa = require("koa")
const fs = require("fs")
const path = require("path")
const app = new Koa()
// 接收到请求后触发use注册的回调函数
app.use(async (ctx) => {
  // ctx: 请求上下文;  request: 请求信息;  response:响应信息;
  // console.log("ctx", ctx.request, ctx.response);
  if (ctx.request.url === "/") {
    const indexContent = await fs.promises.readFile(path.resolve(__dirname, "./index.html")) // 读文件
    ctx.response.body = indexContent // 设置响应体
    ctx.response.set("Content-Type", "text/html") // 设置响应体格式, application/json text/html text/javascript
  }
})
// 启动服务
app.listen(5173, () => {
  console.log("vite dev serve liste on 5173");
})

1. 新建main.js, 在index.html中引入, 响应给浏览器

  
  
  


  hello! my is node sever.
  <script type="module" src="/main.js"></script>

console.log("main js hihi");

const Koa = require("koa")
const fs = require("fs")
const path = require("path")
const app = new Koa()
// 接收到请求后触发use注册的回调函数
app.use(async (ctx) => {
  // ctx: 请求上下文;  request: 请求信息;  response:响应信息;
  // console.log("ctx", ctx.request, ctx.response);
  if (ctx.request.url === "/") {
    const indexContent = await fs.promises.readFile(path.resolve(__dirname, "./index.html")) // 读文件
    ctx.response.body = indexContent // 设置响应体
    ctx.response.set("Content-Type", "text/html") // 设置响应体格式, application/json text/html text/javascript
  }
  if (ctx.request.url === "/main.js") {
    const mainContent = await fs.promises.readFile(path.resolve(__dirname, "./main.js")) // 读文件
    ctx.response.body = mainContent // 设置响应体
    ctx.response.set("Content-Type", "text/javascript") // 设置响应体格式, application/json text/html text/javascript
  }
})
// 启动服务
app.listen(5173, () => {
  console.log("vite dev serve liste on 5173");
})

1. 新建App.vue, 在main.js中引入,响应给浏览器

开发服务返回给浏览器的vue文件已经是编译后的文件了, 我们也要这样做

// 我这里请求失败了, 大概是这个输出有问题
console.log("app vue haha")

import "/App.vue"
console.log("main js hihi");

const Koa = require("koa")
const fs = require("fs")
const path = require("path")
const app = new Koa()
// 接收到请求后触发use注册的回调函数
app.use(async (ctx) => {
  // ctx: 请求上下文;  request: 请求信息;  response:响应信息;
  console.log("ctx", ctx.request, ctx.response);
  if (ctx.request.url === "/") {
    const indexContent = await fs.promises.readFile(path.resolve(__dirname, "./index.html")) // 读文件
    ctx.response.body = indexContent // 设置响应体
    ctx.response.set("Content-Type", "text/html") // 设置响应体格式, application/json text/html text/javascript
  }
  if (ctx.request.url === "/main.js") {
    const mainContent = await fs.promises.readFile(path.resolve(__dirname, "./main.js")) // 读文件
    ctx.response.body = mainContent // 设置响应体
    ctx.response.set("Content-Type", "text/javascript") // 设置响应体格式, application/json text/html text/javascript
  }
  if (ctx.request.url === "/app.vue") {
    const appContent = await fs.promises.readFile(path.resolve(__dirname, "./App.vue")) // 读文件
    // /**
    //  * 如果vue文件, 我们要做处理, 转译为JS返回给前端, 这个过程肯定是非常复杂的, 这里了解一下原理
    //  * 1. 简单理解就是要进行字符串替换: appContent.toString().find("