前端用node搭建局域网访问怎么加载j等文件？

发布于 2022-09-11 18:54:32 字数 2572 浏览 42 评论 0

在练习node的时候，打算搭建一个局域网访问的服务。
使用node的http模块。
启动后能加载本地的html文件但是对于css、js文件无法加载。
请问我的写法对吗？

// 局域网访问
const http = require("http");
const fs = require("fs");
const contentType = {
  "html": "text/html",
  "htm": "text/html",
  "css": "text/css",
  "js": "application/javascript",
  "png": "image/png",
  "jpg": "image/jpeg",
  "xml": "text/xml",
  "json": "application/json",

}
let ROOT = "/worker/HoroyHomeApp-H5";
let server = http.createServer(function (request, response) {
  // 请求路径  
  let url = request.url;
  let file = ROOT + url;
  // 获取请求文件类型  
  let str = url.split(".");
  let type = str[str.length - 1];
  let resContentType = contentType[type] || 'text/plain';

  fs.readFile(file, function (err, data) {
    if (err) {
      response.writeHead(404, {
        "Content-Type": "application/json;charset=utf-8"
      });
      response.write(JSON.stringify({
        "err": err
      }))
      response.end;
    } else {
      response.writeHead(200, {
        "Content-Type": resContentType
      });
      response.write(data)
      response.end;
    }
  })

})
server.listen(8080, "192.168.100.18");
console.log("http://192.168.100.18:8080/html/index.html");

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <button @click="handleclick">{{msg}}</button>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
  <script src="./demo.js"></script>
  <script type="text/javascript">
    var app = new Vue({
      el: '#app',
      data() {
        return {
          msg: "点击"
        }
      },
      methods: {
        handleclick() {
          console.log("ok");
        }
      }
    })
  </script>
</body>

</html>