如何让VueCLI webpack-simple项目在局域网（192.168.1.73:8080）可访问？

嘿，我来帮你搞定这个问题！你遇到的局域网访问不了+CORS提示的问题，本质是webpack-dev-server的默认配置限制了外部访问，咱们一步步调整就能解决：

1. 修改package.json里的dev命令 #

webpack-dev-server默认只监听localhost，得让它监听所有网卡的请求，才能让局域网内的手机访问到。打开package.json，找到scripts里的dev命令，加上--host 0.0.0.0参数：

"scripts": {
  "dev": "webpack-dev-server --open --host 0.0.0.0",
  "build": "webpack --progress --hide-modules"
}

2. 配置webpack.config.js的devServer选项 #

光改命令还不够，还要在webpack配置里明确允许外部访问，并处理CORS问题。打开webpack.config.js，找到devServer配置块（没有的话就新增），添加这些配置：

module.exports = {
  // ... 其他现有配置
  devServer: {
    host: '0.0.0.0', // 监听所有网卡
    port: 8080, // 保持你当前的端口不变
    allowedHosts: 'all', // 允许所有外部主机访问（替代旧版的disableHostCheck）
    // 处理CORS的header配置
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
      'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization'
    }
  }
}

3. 重启服务并测试 #

关掉当前的npm run dev进程，重新执行npm run dev启动服务。确保你的手机和电脑在同一个WiFi局域网里，再用手机访问192.168.1.73:8080就应该能正常打开了。

为啥之前的配置没用？ #

你之前加的'webpack-dev-server/client?http://0.0.0.0:8080'只是指定了客户端连接的地址，但核心问题是服务器本身没对外开放监听，所以外部设备根本连不上服务器。加上上面的配置后，既让服务器对外开放，又解决了CORS跨域提示的问题，一举两得。

内容的提问来源于stack exchange，提问作者dl3c01n