使用Vite启动vue项目 通过IP访问

本文介绍如何配置Vite项目以便在局域网内访问。提供了两种配置方法:一是修改vite.config.js文件中的server.host参数为'0.0.0.0';二是更新package.json文件中的dev脚本,添加--host 0.0.0.0参数。

使用vite运行项目,默认只能使用localhost的方式访问项目。这是因为没有将服务暴露在局域网中

解决方式 一 :

修改 vite.config.js 文件 server 中添加 host

server: {
    host: '0.0.0.0'
},

解决方式 二 :

修改package.json文件

"scripts": {
    "dev": "vite --host 0.0.0.0",
    "build": "vite build",
    "preview": "vite preview"
}

在 VSCode 中启动 Vue 项目后,若希望查看或显示用于本地 IP 访问地址,可以通过配置开发服务器的输出信息实现。默认情况下,Vue CLI 或 Vite 启动的开发服务器会在终端中输出访问地址,包括 `Local` 和 `Network` 地址,后者即为局域网中可通过本地 IP 访问地址。 为了确保终端输出包含本地 IP 地址,可以在 `webpack.dev.conf.js` 文件中修改 `compilationSuccessInfo` 的 `messages` 属性值,使其包含本地 IP 地址信息。具体配置如下: ```javascript compilationSuccessInfo: { messages: [ `App running at: `, `Local: http://localhost:${port}`, `Network: http://${require('ip').address()}:${port}`, ], } ``` 此外,也可以在 `vue.config.js` 文件中设置 `devServer` 的 `host` 属性为 `'0.0.0.0'`,以允许外部设备通过本地 IP 地址访问开发服务器: ```javascript module.exports = { devServer: { host: '0.0.0.0', port: 8080, open: process.platform === 'darwin' ? 'Google Chrome' : 'chrome' } } ``` 如果使用的是 Vite 项目,则可在 `vite.config.js` 文件中进行类似配置: ```javascript export default defineConfig({ server: { host: '0.0.0.0', port: 5173 } }) ``` 对于某些项目,还可以通过在 `package.json` 文件的 `scripts` 部分添加 `--host 0.0.0.0` 参数来实现相同效果: ```json "scripts": { "dev": "vue-cli-service serve --host 0.0.0.0" } ``` 完成上述配置后,重新启动开发服务器。终端输出将包含 `Network` 地址,即可以通过本地 IP 访问地址。如果需要手动获取本地 IP 地址,可在 Windows 系统中使用 `ipconfig` 命令,而在 macOS 或 Linux 系统中使用 `ifconfig` 或 `ip addr` 命令查看本地 IP 地址 [^1]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值