vue项目netWork地址无法访问的问题及解决

vue项目netWork地址无法访问

1.配置vue.config.js

  devServer: {
    host: "0.0.0.0",
    public: "172.201.10.26:1888", // 此处是自己电脑IP地址！
    port: 1888,
    https: false,
    disableHostCheck: true,
    open: false, // 配置自动启动浏览器
}

2.修改host为“0.0.0.0”

public：改为本机ip地址

（1）本机ip查询方法 win+R 后输入cmd弹出命令行

（2）命令行中输入ipconfig后回车，找到IPv4，复制地址 

3.重新运行vue项目

如果出现网络无法访问状态，请确认配置端口号是否相同

vue项目通过network的ip地址访问注意事项

在config.js文件中的dev中修改host为0.0.0.0

 devServer: { // 环境配置
        host: '0.0.0.0',
        port: 8080,
        https: false,
        hotOnly: false,
        disableHostCheck: true,
        open: false // 配置自动启动浏览器
    },

或者在package.json文件下"scripts"的"dev"后面加上–host 0.0.0.0"，如果没有dev就找serve

"scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

设置完成之后就可以用ip+端口号的形式来访问项目

在使用network进行局域网访问时注意

• 局域网访问访问需要打开出站、入站规则
• 防火墙默认打开，无法进行network的ip访问，ip为本机在局域网中的地址
• 关闭防火墙（公用网络）和安全软件即可

设置完成即可使用其它设备在同一局域网下进行访问了

注意：

如果更换了网络状态，ip地址就会发生改变，就不能用旧的ip地址访问，要使用新ip来访问项目

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。