在本地利用node中的express框架监听端口指向文件夹，并可以通过ipv4地址打开

作为一个前端，有的时候如果需要在本地通过HTTP或者HTTPS来访问一个文件夹的话，可以通过软件来实现，但是如果通过nodejs来实现，该怎么实现呢？

一、首先需要下载安装nodejs。

二、然后在本地新建一个文件夹，如server，然后利用cmd或者其他终端工具进入文件夹，在命令行输入npm init来初始化项目，一路回车就行（也可以输入npm init -y，所有问题选择默认选项）。完成之后会生成一个package.json的文件。

我是通过vscode终端进行：

package.json里面的内容：

想要了解更多package.json里面字段的含义，请移步这里package.json

三、然后我们新建一个文件夹，如index；文件夹里新建一个HTML文件，如index.html，内容随意。

四、然后通过命令行安装express和os；npm i express os；这个项目不参与像vue或者react那些打包，所以不用区分。

下载完成之后，package.json中会自动添加相应依赖：

五、在项目中新建server.js，内容如下：

//引入express
const express = require('express');
//监听的端口
const port = 8848;
const app = express();
//引入os
const os = require('os');
//获取本机ipv4地址
function getIPv4() {
    //同一接口可能有不止一个IP4v地址，所以用数组存
    let ipv4s = [];
    //获取网络接口列表对象
    let interfaces = os.networkInterfaces();
    Object.keys(interfaces).forEach(function (key) {
        interfaces[key].forEach(function (item) {
            //跳过IPv6 和 '127.0.0.1'
            if ('IPv4' !== item.family || item.internal !== false) return;
            ipv4s.push(item.address); //可用的ipv4s加入数组
            // console.log(key + '--' + item.address);
        })
    })
    return ipv4s[0]; //返回一个可用的即可
}
let ipv4 = getIPv4();
//设置静态文件路径
app.use(express.static('./index'));
//监听端口
module.exports = app.listen(port, function (err) {
    if (err) {
        console.log(err)
        return
    } else {
        console.log('Listening at http://localhost:' + port + '\n' + 'or at http://' + ipv4 + ':' + port)
    }
})

六、我们在package.json文件中添加一个运行命令：

七：终端运行 npm run server

 

两个地址都可以打开：

 

为什么要用ipv4地址，是考虑到有时候写项目时，需要整个公司的员工进行测试。

如果需要自动打开浏览器，请移步自动打开浏览器，位置在更新日志2018-01-07添加自动打开默认浏览器功能