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
·
打开项目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的问题
如图所示:
然后重新运行项目即可。
更多推荐
已为社区贡献9条内容
所有评论(0)