Vue移动端开发如何在手机端时时预览

桃扇骨 2022-02-28 23:46 426阅读 0赞

在开发移动端的时候，特别想在真机上看自己开发出来的成果，之前用的是 `Ghostlab`这玩意，可是呢，这玩意是要收费的，而且只有`7天`的体验时间，感觉有点不满足。  
现在分享一个更加方便的方法，是在`webpack`工具构建在的`vue`项目，实现真机实时预览...

--------------------

**1.电脑和手机连接同一个`wifi`**  
用`wifi共享大师`开个wifi，手机连接，这都是常规操作啦  
**2.查询本地`IP`地址**  
`WIN + R`，输入`cmd`回车，打开命令提示符，输入`ipconfig`，查看本地`IPv4`

![Image 1][]

**3.修改本地项目中`IP`地址**  
找到项目中的`config`文件夹中的`index.js`文件

![Image 1][]

示例如下：

module.exports = {
    dev: {
        host: '192.168.0.114', // 原为: hotst: 'localhost'
        }
    }

手机浏览器上输入修改后的项目地址`http://192.168.0.114:8080`也可以预览，然后大工告成。

**你可能感兴趣的**

*  [黑科技！Fundebug支持网页录屏!][Fundebug]
 *  [Async/Await替代Promise的6个理由][Async_Await_Promise_6]
 *  [30个极大提高开发效率的VS Code插件][30_VS Code]
 *  [10个JavaScript难点][10_JavaScript]
 *  [2018前端工程师成长路线图][2018]
 *  [Source Map入门教程][Source Map]
 *  [2018年最值得关注的30个Vue开源项目][2018_30_Vue]
 *  [10个最佳ES6特性][10_ES6]
 *  [重新思考单元测试][Link 1]
 *  [不要争了！技术选择没那么重要][Link 2]

[Image 1]: 
[Fundebug]: https://blog.fundebug.com/2018/05/21/fundebug_release_black_tech_replay/
[Async_Await_Promise_6]: https://blog.fundebug.com/2017/04/04/nodejs-async-await/
[30_VS Code]: https://blog.fundebug.com/2018/07/24/vs-extensions/
[10_JavaScript]: https://blog.fundebug.com/2017/07/17/10-javascript-difficulties/
[2018]: https://blog.fundebug.com/2018/09/04/2018-frontend-roadmap/
[Source Map]: https://blog.fundebug.com/2017/03/13/sourcemap-tutorial/
[2018_30_Vue]: https://blog.fundebug.com/2018/05/29/30-amazing-vuejs-open-source/
[10_ES6]: https://blog.fundebug.com/2017/08/21/10-best-es6-feature/
[Link 1]: https://blog.fundebug.com/2017/12/20/rethinking-unit-test/
[Link 2]: https://blog.fundebug.com/2018/07/19/technology-selection-is-not-critical/