vue.config.js中,devServer对象用于配置开发服务器的行为

作者 : admin 本文共671个字,预计阅读时间需要2分钟 发布时间: 2024-06-9 共3人阅读
devServer: {
  hot: true, // 启用模块热替换(Hot Module Replacement,HMR)。
  liveReload: true, // 启用页面自动刷新。当热更新失败时,将回退到页面自动刷新。
  open: true, // 启动服务器后自动打开浏览器。
  port: 8080, // 设置开发服务器监听的端口号。
  host: '127.0.0.1', // 设置开发服务器监听的地址。
  // 其他可能的配置属性...
}

解释如下:

  • hot: 当设置为true时,Vue CLI 3+ 的开发服务器将启用模块热替换(HMR)。这意味着,当你修改并保存一个组件文件时,只有那个组件会被重新渲染,而不是整个页面。这提供了更快的开发体验,因为你不需要等待整个页面刷新。

  • liveReload: 当设置为true时,如果HMR失败(例如,某些模块不支持HMR),那么浏览器将自动刷新整个页面。这是HMR的一个后备机制。

  • open: 当设置为true时,开发服务器启动后会自动在默认浏览器中打开应用程序。

  • port: 指定开发服务器监听的端口号。默认情况下,Vue CLI 3+ 会在可用的端口上启动开发服务器,但你可以通过此选项指定一个特定的端口。

  • host: 指定开发服务器监听的地址。在大多数情况下,127.0.0.1(也就是localhost)就足够了,因为它只在本地机器上监听。但如果你想在局域网中的其他设备访问你的开发服务器,你可以更改此地址。

此外,devServer对象还支持其他许多配置选项,可以根据你的具体需求进行配置。你可以查看Webpack DevServer文档获取更多详细信息。 

本站无任何商业行为
个人在线分享 » vue.config.js中,devServer对象用于配置开发服务器的行为
E-->