如何在手机上查看测试vue-cli构建的项目

用vue-cli构建的项目有时候有些功能需要在手机上测试，比如上传图片的时候调用手机拍照功能或者查看相册的功能，这个时候就要用到手机测试了，那么如何在手机上查看测试vue-cli构建的项目？今天就写一写具体步骤。

1：打开cmd,命令行运行 ipconfig，得到本机的ip地址：

图片.png

2：得到ipv4值， 用该值替换localhost 例如 localhost:8080 替换成 192.168.1.101:8080

3：找到config文件夹下的index.js文件，打开后，将host的值改为我本地的ip，保存后重启项目 此时的访问链接为：http://192.168.1.122:8080

图片.png

4：通过在线网站http://cli.im/生成二维码（草料二维码），微信扫扫就可以直接访问了 或者直接访问步骤三的链接http://192.168.1.122:8080查看项目。如果是要访问具体页面，在#后面加上组件名称即可。

例如：http://192.168.1.122:8080/#/adjustIntegrals（当我本机运行项目的时候，本链接可直接访问）

图片.png

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，爱折腾。 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。