vue移动端项目的真机测试

记一次vue移动端项目的真机测试:
vue项目移动端真机测试很简单,最开始我们得确保我们的手机和电脑连接的是同一个网络,在同一个局域网下。
首先我们用ipconfig查看本机的ip地址
查看ip
此时我们看到了我们的ip地址是192.168.16.110,然后就开始配置我们的vue(我使用的是vue/cli3脚手架,所以是不会自带config目录的,需要自己在根目录创建vue.config.js进行配置)

//vue.config.js
module.exports={
    devServer:{
        host:'192.168.16.110',//把刚刚查看到的ip地址复制到这
        port:8081,
        proxy:{//处理跨域
            '/api':{
                target: 'http://192.168.16.110:8080',//这是后端接口的地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

注意:如果你后端地址用的是http://localhost:8080是不行的,在电脑看是没问题的,但是我们在手机看是看不到的,因此要把后端的地址改成我们查到的ip地址+端口号。
vue运行成功
这时候我们用手机请求这个地址就可以看到我们项目啦。
注意:如果还是看不到的话,关闭电脑的防火墙。如果一些静态文件请求不到的话,也要去看一下你的ip地址是不是对的。

发布了6 篇原创文章 · 获赞 0 · 访问量 72
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览