vue3 - vite配置指定浏览器用ip打开？

Question

server现在的配置是这样，

  server: {
    host: "0.0.0.0",
    open: true, // 开发服务器启动时，是否自动在浏览器中打开应用程序  
}

然后在env中添加了配置 BROWSER='C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
现在可以打开浏览器，但是是localhost的，现在想打开时直接用ip 应该怎么改呢

Answer 1

在vite.config.js, server里面open 位置直接指定 ip 和 端口就可以了

  server: {
    host: "0.0.0.0",
    port: 9999,
    open: 'http://xxx.xx.xxx.xxx:9999', // 指定 IP 地址和端口
}

Answer 2

server: {
host: '本机IP地址',
open: true
}

"scripts": {
"dev": "vite && start http://本机IP",
"build": "vite build"
},

如果要指定端口,server配置的同时, start命令后面也要改

Answer 3

为了在 Vite 开发服务器中使用 IP 地址而非 localhost 打开浏览器，你需要修改 Vite 的 server.open 配置以包含特定的 URL。不过，server.open 配置项本身并不直接支持设置完整的 URL（包括 IP 地址和端口），它主要用于控制是否在开发服务器启动时自动打开浏览器。

要实现你的需求，有几种方法可以尝试：

1. 修改 server.open 并在启动脚本中指定浏览器

由于 Vite 的 server.open 配置不直接支持 IP 地址，你可以通过在启动 Vite 之前使用命令行或脚本来手动打开浏览器到特定的 IP 地址和端口。

例如，你可以写一个简单的启动脚本（假设你使用的是 npm 脚本或类似的工具）：

"scripts": {
  "start": "vite --host 0.0.0.0 --port 3000 && start http://你的IP地址:3000"
},

注意：这里的 start 命令是 Windows 特有的，用于在默认浏览器中打开 URL。如果你在 macOS 或 Linux 上，你可能需要使用 open（macOS）或 xdg-open（大多数 Linux 发行版）来替代 start。

2. 使用环境变量或配置文件来动态设置 IP

如果你的应用场景需要在不同的环境中频繁更改 IP 地址，你可以考虑使用环境变量或配置文件来动态设置这个值，并在启动脚本中引用它。

例如，你可以在 .env 文件中设置 IP 地址：

VITE_IP=192.168.1.100

然后在你的启动脚本中引用这个变量：

"scripts": {
  "start": "vite --host 0.0.0.0 --port 3000 && start http://$VITE_IP:3000"
},

3. 使用 Vite 插件

你也可以编写一个 Vite 插件，在开发服务器启动后，根据配置自动打开浏览器到指定的 IP 地址。不过，这种方法相对复杂，需要一定的 Vite 插件开发经验。

结论

对于大多数情况，使用启动脚本来在开发服务器启动后手动打开浏览器到指定的 IP 地址是最简单且有效的方法。如果你需要更复杂的配置或自动化，考虑使用 Vite 插件或结合环境变量和配置文件的方法。