给纯 Node 项目添加 UI 页面笔记

---

前提

• 之前有一个纯 node 的脚本，用来处理一些逻辑，现在我想写一个页面来展示逻辑，或者说有一个 UI 去控制逻辑
• 想法是，启动 node 之后，把页面的静态页面也引入

思路

• 把 用 vite 打包好的 build 文件，直接拖进 node 里，并监听一个端口

操作

• 用 vite 的脚手架先搭建一个前端项目

  npm create vite@latest
  

• 前端安装好依赖之后，直接构建

  npm run build
  

• 之后把打包的 dist 文件夹拖到 node 项目里的根目录下，待会儿引入

• 然后在 node 脚本里添加

  const Koa = require("koa");
  const koa_static = require("koa-static")
  
  const app = new Koa();
  app.use(koa_static(__dirname + '/dist')); // 添加查找静态资源的中间件，配置路径
  app.use(async (ctx, next) => {
    await ctx.render("index.html");
  });
  app.listen(3000);
  

验证

作为对比，这是之前的 node 文件

添加如下几行代码

然后访问一下 3000 端口

所以说这是可行的~