最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 简单的:vue内网穿透配置

    正文概述 掘金(优质青年小张)   2021-05-25   882

    什么是内网穿透:

    一般来说我们在本地运行项目,都是通过

    http://localhost:8082/ 
    
    http://10.0.10.27:8082/
    
    

    这样来访问本地运行的项目,不知道大家有没有遇到过这样访问本地项目的

    http://dev.xxxxxxxx.cn:8080/618
    
    

    通过一个域名地址来访问本地项目;

    为什么要这样访问呢?

    • 提供内网穿透服务

    • 连接内网服务器,在外网演示内网web站点

    • 无需服务器部署,快速调试本地程序,方便快速开发微信公众号和微信小程序

    • 支持http、https协议站点,省去证书中间件复杂配置,http协议站点直接升级为https站点

    • 支持TCP,UDP协议端口转发。支持数据库、SSH、远程桌面、网络摄像头等等开放到外网。

    简单实现:

    怎么实现呢?(vue为例)

    第一步,修改vue的配置 disableHostCheck

    disableHostCheck是webpack中webpack-dev-server的一个配置项; 感兴趣大家可以自己去看一下;

    vue-cli版本3.0的情况下修改vue.config.js的配置
    
    module.exports = {
      devServer: {
        disableHostCheck: true
      }
    }
    
    

    这一步是让vue 本地服务 能被外部IP访问;

    接着就是修改本地电脑的 host配置:

    一般来说window的host文件路径为:

    C:\WINDOWS\system32\drivers\etc

    host文件内容:

    # Copyright (c) 1993-2009 Microsoft Corp.
    #
    # This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
    #
    # This file contains the mappings of IP addresses to host names. Each
    # entry should be kept on an individual line. The IP address should
    # be placed in the first column followed by the corresponding host name.
    # The IP address and the host name should be separated by at least one
    # space.
    #
    # Additionally, comments (such as these) may be inserted on individual
    # lines or following the machine name denoted by a '#' symbol.
    #
    # For example:
    #
    #      102.54.94.97     rhino.acme.com          # source server
    #       38.25.63.10     x.acme.com              # x client host
    
    # localhost name resolution is handled within DNS itself.
    #	127.0.0.1       localhost
    #	::1             localhost
    
    

    添加我们的域名地址:

        增加这一句
        
           127.0.0.1  你的域名
    

    最后:

    # Copyright (c) 1993-2009 Microsoft Corp.
    #
    # This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
    #
    # This file contains the mappings of IP addresses to host names. Each
    # entry should be kept on an individual line. The IP address should
    # be placed in the first column followed by the corresponding host name.
    # The IP address and the host name should be separated by at least one
    # space.
    #
    # Additionally, comments (such as these) may be inserted on individual
    # lines or following the machine name denoted by a '#' symbol.
    #
    # For example:
    #
    #      102.54.94.97     rhino.acme.com          # source server
    #       38.25.63.10     x.acme.com              # x client host
    
    # localhost name resolution is handled within DNS itself.
    #	127.0.0.1       localhost
    #	::1             localhost
    
    
           127.0.0.1     dev.xxxxxxx.cn
    
    

    最后大功告成:

    我们就可以 这样dev.xxxxxxxx.cn:8080/618 访问本地的项目了;


    起源地下载网 » 简单的:vue内网穿透配置

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元