vue开发移动端在手机实时预览

在使用vue开发移动端时,特别想在真机上看看自己开发出来的成品,现在分享一个很方便的方法,在 webpack 工具构建vue项目时,实现真机实时预览。


  1. 电脑和手机连接同一个WiFi

  2. 查询电脑本地IP 地址

    • WIN + R ,输入 cmd 回车,打开命令提示符,输入 config ,查看本地 IPv4
      查看IP
  3. 修改项目中的 IP 地址

    • 找到项目中的config文件夹中的index.js文件


      修改IP地址

      改为IP4地址

示例:

    module.exports = {
            dev: {
                    host: '192.168.0.114', // 原为: hotst: 'localhost'
            }
    }
  1. 制作二维码实现手机预览
    • 访问链接:https://cli.im/ 生成二维码,使用手机扫描即可
生成二维码
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在开发移动端的时候,特别想在真机上看自己开发出来的成果,之前用的是 Ghostlab这玩意,可是呢,这玩意是要收费...
    程序猿阿峰阅读 4,765评论 4 32
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,973评论 1 4
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,104评论 0 2
  • 名词延伸 通俗的说,域名就相当于一个家庭的门牌号码,别人通过这个号码可以很容易的找到你。如果把IP地址比作一间房子...
    杨大虾阅读 20,641评论 2 56
  • Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨...
    劳卜阅读 53,477评论 22 420