前端开发在本地跑vue build的文件 （node创建本地服务）

     之前写完vue build完之后特别想在本都运行下dist文件下的index.html文件，但是本地不能直接运行要通过http。有在网上看下本地想跑的话，开启tomcat的服务。今天刚好学习到了node,创建服务，为何不可通过这个服务来运行build后的文件呢。

首先抄了一段代码直接运行：

var http = require('http');
var fs = require('fs');
var url = require('url');
 
// 创建服务器
http.createServer( function (request, response) {  
   // 解析请求，包括文件名
   var pathname = url.parse(request.url).pathname;
   
   // 输出请求的文件名
   console.log("Request for " + pathname + " received.");
   
   // 从文件系统中读取请求的文件内容
   fs.readFile(pathname.substr(1), function (err, data) {
      if (err) {
         console.log(err);
         // HTTP 状态码: 404 : NOT FOUND
         // Content Type: text/plain
         response.writeHead(404, {'Content-Type': 'text/html'});
      }else{             
         // HTTP 状态码: 200 : OK
         // Content Type: text/plain
         response.writeHead(200, {'Content-Type': 'text/html'});    
         
         // 响应文件内容
         response.write(data.toString());        
      }
      //  发送响应数据
      response.end();
   });   
}).listen(8080);

然后发现css，js静态资源并不能起作用：

index.html:1 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://127.0.0.1:8080/static/css/app.77f5ccd95d6d69183d297cfcdfc3d4dc.css".

关键在于Resource interpreted as Stylesheet but transferred with MIME type text/html也就是说样式被按照text/html格式传输了。显然是这一句话的问题： response.writeHead(200, {'Content-Type': 'text/html'});
那么我们的解决思路就是对于不同类型的文件Content-Type要不同。
之后就重新优化了这个服务，如下：

var http = require('http');
var fs = require('fs');
 
//主要思想就是任何一个静态文件也应该做响应，一个获取静态文件都应当请求来处理，这是主要思想
var server = http.createServer();
 
var handlerequest = function(request,respone){
    var url = request.url;
   // respone.writeHead(200,{'Content-Type':'text/html'});
   if(url=='/'){
       respone.writeHead(200,{'Content-Type':'text/html'});
        var ns = fs.readFile('./index.html', function(err, data) {
            if (err) {
                console.error(err);
                return;
            }
            respone.end(data);
        });
        //respone.end();
   }else if(url != '/'){
       var surl = '.'+url;
       var type = surl.substr(surl.lastIndexOf(".")+1,surl.length)
       respone.writeHead(200,{'Content-type':"text/"+type});
      // respone.writeHead(200,{'Content-Type':'text/css'});
       var ns = fs.readFile(surl, function(err, data) {
           if (err) {
               console.error(err);
               return;
           }
           respone.end(data);
       });
   }
}
server.on('request',handlerequest);
 
server.listen(3000,function(){
    console.log("runing...");
})

浏览器运行就能正常显示啦！！

image.png