温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Vue项目配置在局域网下怎么访问

发布时间:2023-04-17 11:13:44 来源:亿速云 阅读:207 作者:iii 栏目:开发技术

这篇文章主要介绍“Vue项目配置在局域网下怎么访问”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue项目配置在局域网下怎么访问”文章能帮助大家解决问题。

    Vue项目配置在局域网下访问

    1.vue配置

    a.vue cli2.0配置如下

    Vue项目配置在局域网下怎么访问

    b.vue cli3.0不需要配置即可访问

    2.如果上述配置无法访问则配置以下

    需要配置一下电脑防火墙,把所需的端口(如:8080)打开。

    设置方法如下:

    2.1  Windows 10 ,搜索“控制面板”,打开,Windows 7 可以直接在开始菜单打开。

    2.2  点击“Windows Defender防火墙”——“高级设置”——新建“入网规则”。

    Vue项目配置在局域网下怎么访问

    2.3 规则类型选择“端口”

    Vue项目配置在局域网下怎么访问

    2.4 下一步“特定本地端口”填 8080-8088 (此处是一个 IP 段,因为如果打开多个项目,端口会被占用, Vue会自动分配一个新的端口。如:8081 )。

    Vue项目配置在局域网下怎么访问

    2.5下一步“允许连接”

    2.6下一步选择开放的场景,注意一定要选前两个

    Vue项目配置在局域网下怎么访问

    2.7下一步输入规则名称,点击“完成”即可

    这样用手机访问电脑 IP 加端口号,192.168.1.11:8080 就可以打开项目了。

    注意:手机和电脑必须在同一局域网下才能访问,同事电脑同理

    获取IP 方法:

    打开命令提示行工具,输入 ipconfig 回车, 就可以看到自己的IP了,比如我的 192.168.2.103 。

    Vue项目配置在局域网下怎么访问

    这样更加方便真机调试,无需部署到服务器就可以进行访问和测试。

    同一局域网下访问vue项目

    同一局域网

    在你的电脑上用快捷键windows + R打开cmd,使用ping + ip地址(想要访问你项目的那台电脑的ip地址),如果成功后就表示你们处于同一局域网下。

    Vue项目配置在局域网下怎么访问

    本机ip地址

    在你的电脑上用快捷键windows + R打开cmd,使用ipconfig命令,就可以看到本机ip地址。

    Vue项目配置在局域网下怎么访问

    访问本地项目

    当你成功执行上一步,确定你们处于同一局域网下后:在你的项目中找到config文件夹,找到index.js文件,你可以看到host:localhost(默认),将localhost改成本机ip地址(放vue项目的那台电脑的ip地址,如不知道本机ip地址,可参考上一步)

    Vue项目配置在局域网下怎么访问

    保存后重新运行该项目,生成的新的访问地址就是处于同一局域网下都可访问该项目的地址。

    Vue项目配置在局域网下怎么访问

    关于“Vue项目配置在局域网下怎么访问”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    vue
    AI