使用Sunny-Ngrok做内网穿透

地址:https://www.ngrok.cc/user.html

1.开通隧道 然后在隧道管理中可以看到隧道的相关信息

2.在隧道管理中可以看到客户端下载 现在完成后使用隧道的id进行启动 然后就可以使用赠送的域名访问了

3.隧道的本地端口就是已启动项目的ip和端口

例如:启动一个server.js文件 和新建一个index.html文件 ，这里填写的端口是8888 那么本地端口应填写127.0.0.1:8888 ，实际访问路径就是赠送的域名加/index.html

var http=require('http'); //用来启服务
var fs=require('fs'); //用来读取文件
var root="E:/love" //你本地放index.html页面的文件路径

//开启服务
var server=http.createServer(function(req,res){
    var url=req.url;
    var file = root+url;
    fs.readFile(file,function(err,data){
        if(err){
            res.writeHeader(404,{
                'content-type' : 'text/html;charset="utf-8"'
            });
            res.write('<h1>404错误</h1><p>你要找的页面不存在</p>');
            res.end();
        }else{
            res.writeHeader(200,{
                'content-type' : 'text/html;charset="utf-8"'
            });
            res.write(data);//将index.html显示在客户端
            res.end();

        }
    })
}).listen(8888); //端口号
console.log('服务器开启成功')

注意:
vue-cli项目在webpack.dev.conf.js中的devServer中添加disableHostCheck: true

  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    },
    hot: true,
    contentBase: false, // since we use CopyWebpackPlugin.
    compress: true,
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay
      ? { warnings: false, errors: true }
      : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    },
    disableHostCheck: true
  }