fix: open page with the correct host (#3954)

Author: chenjiahan

packages/core/src/server/helper.ts

@@ -350,7 +350,10 @@ const isLoopbackHost = (host: string) => {
   return loopbackHosts.includes(host);
 };
 
-const getHostInUrl = (host: string) => {
+export const getHostInUrl = (host: string): string => {
+  if (host === DEFAULT_DEV_HOST) {
+    return 'localhost';
+  }
   if (net.isIPv6(host)) {
     return host === '::' ? '[::1]' : `[${host}]`;
   }

packages/core/src/server/open.ts

@@ -4,6 +4,7 @@ import { STATIC_PATH } from '../constants';
 import { canParse, castArray } from '../helpers';
 import { logger } from '../logger';
 import type { NormalizedConfig, Routes } from '../types';
+import { getHostInUrl } from './helper';
 
 const execAsync = promisify(exec);
 
@@ -139,7 +140,6 @@ export async function open({
   clearCache?: boolean;
 }): Promise<void> {
   const { targets, before } = normalizeOpenConfig(config);
-  const host = config.server.host || 'localhost';
 
   // Skip open in codesandbox. After being bundled, the `open` package will
   // try to call system xdg-open, which will cause an error on codesandbox.
@@ -155,6 +155,7 @@ export async function open({
 
   const urls: string[] = [];
   const protocol = https ? 'https' : 'http';
+  const host = getHostInUrl(config.server.host);
   const baseUrl = `${protocol}://${host}:${port}`;
 
   if (!targets.length) {

website/docs/en/config/server/open.mdx

@@ -23,7 +23,7 @@ type Open =
 
 `server.open` can be set to the following values.
 
-- Open the project's default preview page, equivalent to `http://localhost:<port>`:
+- Open the project's default preview page, which defaults to `http://localhost:<port>`. If [server.host](/config/server/host) is configured, it defaults to `http://<host>:<port>`.
 
 ```js
 export default {

website/docs/zh/config/server/open.mdx

@@ -23,7 +23,7 @@ type Open =
 
 `server.open` 可以设置为如下的值。
 
-- 打开项目的默认页面，等价于 `http://localhost:<port>`：
+- 打开项目的默认页面，默认为 `http://localhost:<port>`。如果配置了 [server.host](/config/server/host)，则默认为 `http://<host>:<port>`。
 
 ```js
 export default {