Vue Cli 修改localhost为IP访问

本文档介绍了如何修改package.json和config/index.js文件,以支持除localhost外的IP地址访问,并通过创建get-ip.js脚本来获取本机IP,从而在提示中显示本机IP地址,允许通过本地或本机IP访问项目。这一改动对于需要在不同设备上测试应用的情况非常有用。
摘要由CSDN通过智能技术生成

1.修改 package.json,增加 --host 0.0.0.0,让本次代码支持localhost以外的ip地址访问模式
在这里插入图片描述
2.修改config/index.js,将localhost改为0.0.0.0
在这里插入图片描述
此时项目就可以通过localhost或本机IP访问了,但是在cmd输出上只提示了0.0.0.0:8080访问路径,需要修改提示
在这里插入图片描述
修改方式:
1.在build目录下创建一个获取本机IP的方法,get-ip.js
在这里插入图片描述

var os = require('os'),
	ip = '',
	ifaces = os.networkInterfaces() // 获取本机ip

out:

	for (var i in ifaces) {
		for (var j in ifaces[i]) {
			var val = ifaces[i][j]

			if (val.family === 'IPv4' && val.address !== '127.0.0.1') {
				ip = val.address

				break out

			}

		}

	}

module.exports = ip

2.在webpack.dev.conf.js中引用方法

const IP = require('./get-ip')

在这里插入图片描述

3.修改提示
在这里插入图片描述

` App running at: `,
`-Local:   http://localhost:${port}`,
`-Network: http://${IP}:${port}`

4.最后
在这里插入图片描述

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值