Vue项目没法使用局域网IP直接访问的配置方法

通常使用 vue-cli 下来的项目是能够直接访问局域网 IP 打开的，好比 192.168.1.11:8080 。可是最近公司的一个项目只能够经过 localhost 访问。

须要配置一下，才可直接用局域网 IP 访问，方法以下：

给 dev 添加--host 0.0.0.0 属性：

"scripts": {   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",   "start": "npm run dev",   "unit": "jest --config test/unit/jest.conf.js --coverage",   "test": "npm run unit",   "build": "node build/build.js" },

这样就能够用手机访问电脑的 IP 直接打开项目网站了。

若是仍是没法访问，须要配置一下电脑的防火墙，把所需的端口（如：8080）打开。

设置方法以下：

Windows 10 ，搜索“控制面板”，打开，Windows 7 能够直接在开始菜单打开。

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

规则类型选择“端口”，下一步“特定本地端口”填 8080-8088 （此处是一个 IP 段，由于若是打开多个项目，端口会被占用， Vue会自动分配一个新的端口。如：8081 ）。

下一步“容许链接”，下一步选择开放的场景，我选的是前两个，下一步输入规则名称，点击“完成”便可。

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

获取电脑 IP 的方法：

Win + R 运行“cmd”，输入 ipconfig 回车, 就能够看到本身的IP了，好比个人 192.168.2.103 。

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

声明：本文由w3h5原创，转载请注明出处：《Vue项目没法使用局域网IP直接访问的配置方法》 https://www.w3h5.com/post/459.html

原文出处：https://www.cnblogs.com/deshun/p/12075520.html