900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > Vue项目本地运行环境下设置既能localhost访问又能IP访问 并且可以外网环境下通过域名访问

Vue项目本地运行环境下设置既能localhost访问又能IP访问 并且可以外网环境下通过域名访问

时间:2022-12-04 08:21:31

相关推荐

Vue项目本地运行环境下设置既能localhost访问又能IP访问 并且可以外网环境下通过域名访问

打开项目build下index.js文件,将localhost改为 0.0.0.0,port端口号改不改都行,只要保证这个端口号没有被占用即可。

然后打开项目package.json文件,找到

将红框内的改为:

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 0.0.0.0",

然后重新运行项目。即可实现既能localhost:端口号访问又能IP地址:端口号 访问。

下面配置外网环境下域名访问。

将上面设置的端口号在路由器中配置端口映射。这里不多说了,可以百度。

我这里将刚刚项目里index.js文件配置的端口号11111映射到了23456端口。

到这一步就可以实现外网环境下通过公网IP:23456访问vue项目了。

百度IP可以查看到本机公网IP。

但是如果输入域名:23456访问会出现

Invalid Host header提示。

解决办法:

打开build/webpack.dev.conf.js文件,搜索“devServer”,添加如下配置:

disableHostCheck: true,// 解决域名访问本地运行地址时出现Invalid Host header的问题

如图所示:

然后重新运行项目即可。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。