vue项目中webpack-dev-server的open和host0.0.0.0配置冲突

简介: 一个比较老的公司项目,webpack 用的 v3 版本,为了实现localhost、127.0.0.1和本机ip可以同时访问,webpack的devServer里的 host 我们一般会设置成 0.0.0.0,这样本机所有 ipv4 地址都可以实现访问

一个比较老的公司项目,webpack 用的 v3 版本,为了实现localhost、127.0.0.1和本机ip可以同时访问,webpack的devServer里的 host 我们一般会设置成 0.0.0.0,这样本机所有 ipv4 地址都可以实现访问。

比如我们要将本地运行的前端项目,分享给公司的后端、产品、测试...预览效果,如果 host 直接设置的 localhost,运行后打开的地址 http://localhost:8080,直接分享给别人是没法打开的。

为了解决上面局域网共享的问题,我们就需要将前端服务运行在 0.0.0.0,然后将本机的 ipv4 地址如:http://192.168.2.228:8080 分享给别人,同一局域网内的用户就可以直接访问了。

浏览自动打开了http://0.0.0.0:8080

但是当我们设置之后,默认自动打开的浏览器地址和终端输出的运行地址也变成了:http: //0.0.0.0:8080 ,更要命的是这个地址在 windows 上是被当成无效地址没法访问的,mac上是可以直接访问。
1.png

查看 webpack 配置,注意只保留了相关的主要代码:

// webpack.dev.conf.js
'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    host: HOST || config.dev.host,
    port: PORT || config.dev.port,
    open: config.dev.open,
  }
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

当设置了自动打开浏览器 open 时,打开的地址会直接用我们设置的 host,所以会打开 http://0.0.0.0:8080。首先需要将服务运行的地址和我们浏览器里打开的地址分开设置,服务运行地址我们需要固定成 0.0.0.0,但浏览器里打开的地址我们不需要这个。

第一点我们可以直接通过 scripts 里的命令来设置 --host 参数指定 0.0.0.0,直接在命令行里传递的参数优先级最高,修改 package.json:

{
  "name": "front-end",
  "version": "1.0.0",
  "description": "客户端",
  "author": "cafehaus",
  "private": true,
  "scripts": {
    "predev": "yarn",
    "dev": "webpack-dev-server --inline --progress --host 0.0.0.0 --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js"
  },
}

devServer.public 配置浏览器地址

然后可以通过 devServer.public 配置来设置浏览器要打开的地址,不过只能webpack的v3和v4版本使用,而且这个必须设置完整的 host:port,但是这个地方的port我们又不能写成固定的,因为如果自己设置的端口被占用了,webpack-dev-server实际运行起来会帮我们找一个系统未被占用的端口。
2.png

我们可以借助 portfinder-sync 来查找系统的可用端口,然后设置给 public,大概的代码思路如下:

const config = require('../config')
const portFinderSync = require('portfinder-sync')
const port = portFinderSync.getPort(config.dev.port)

const devServer = {
  host: 'localhost',
  open: true,
  port,
  public: `localhost:${port}`,
},

终极解决方案

要获取实际使用的端口,webpack 其实有用到 portfinder 这个包,我们直接在 webpack.dev.conf.js 里改下最后面的配置就可以了,直接在 portfinder 那设置下 devWebpackConfig.devServer.public 就可以了,我们还可以借助 address 来获取本机的 ipv4 地址,用 chalk 来美化输出:

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')
const address = require('address')
const chalk = require('chalk')

const HOST = process.env.HOST || config.dev.host || '0.0.0.0' // 服务地址,设置成 0.0.0.0 可以让本机上所有 ipv4 地址访问
const LOCAL_HOST = config.dev.host || 'localhost' // 本地访问地址
const LOCAL_IP = address.ip() // 本地 ip
const PORT = (process.env.PORT && Number(process.env.PORT)) || config.dev.port || 8080 // 端口

const devWebpackConfig = merge(baseWebpackConfig, {
  devServer: {
    host: HOST,
    port: PORT,
    open: config.dev.autoOpenBrowser,
  }
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = PORT
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port
      devWebpackConfig.devServer.public = `${LOCAL_HOST}:${port}`,

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [
            `  App running at:`,
            `  - Local:   ` + chalk.cyan(`http://${LOCAL_HOST}:${port}`)
            `  - Network: ` + chalk.cyan(`http://${LOCAL_IP}:${port}`)
          ],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

3.png

webpack-dev-server 的几个相关配置

devServer.host

配置访问地址,host:主机、服务机,v3 和 v4 版本默认 localhost,v5 版本默认是 0.0.0.0

devServer.port

端口

devServer.public

可以用来设置默认打开浏览器的地址,注意 v3 和 v4 版本才有这个配置,webpack v5 版本已经没有这项配置了

目录
相关文章
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
6天前
|
缓存 前端开发 JavaScript
前端性能优化:Webpack与Babel的进阶配置与优化策略
【10月更文挑战第28天】在现代Web开发中,Webpack和Babel是不可或缺的工具,分别负责模块打包和ES6+代码转换。本文探讨了它们的进阶配置与优化策略,包括Webpack的代码压缩、缓存优化和代码分割,以及Babel的按需引入polyfill和目标浏览器设置。通过这些优化,可以显著提升应用的加载速度和运行效率,从而改善用户体验。
21 5
|
8天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
32 7
|
9天前
|
前端开发
配置 Webpack 实现热更新
【10月更文挑战第23天】还可以进一步深入探讨热更新的具体实现细节、不同场景下的应用案例,以及如何针对特定需求进行优化等方面的内容。通过全面、系统地了解 Webpack 热更新的配置方法,能够更好地利用这一功能,提升项目的开发效率和性能表现。同时,要不断关注 Webpack 及相关技术的发展动态,以便及时掌握最新的热更新技术和最佳实践。
|
7天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
20 2
|
9天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
110 4
|
12天前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
9天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
14天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
22 6
|
9天前
|
存储 缓存 监控
配置 Webpack 5 持久化缓存时需要注意哪些安全问题?
【10月更文挑战第23天】通过全面、系统地分析和应对安全问题,能够更好地保障 Webpack 5 持久化缓存的安全,为项目的成功构建和运行提供坚实的安全基础。同时,要保持对安全技术的关注和学习,不断提升安全防范能力,以应对日益复杂的安全挑战。