WebStorm ---Vue项目使用移动端打开

目录

问题

解决方法

总结

---

问题

前端在写网站时，通常要考虑移动端适配的问题：

对于静态效果：在电脑上使用 “检查” 可以调整显示窗口的大小，以此来测试应对不同大小窗口时，各组件如何进行自适配

对于动态效果：例如点击图片打开新页面，移动端和网页会有差异，此时就需要在移动端显示vue项目的整体效果

解决方法

我在参考了很多博客，基本都是对webstorm的Setting的某几项进行设置，再在文件中更改host的值为本地电脑的ip，遗憾的是对我并不起作用。

后来我请教AI，得到方法如下（真的非常简便...

1、获取电脑ip地址

        Win + R ， 输入cmd 打开终端窗口 ， 输入 ipconfig ，IPv4地址即电脑ip地址

2、打开webstorm你的目标项目，打开终端（Alt + F12）

3、输入代码（运行vue的同时修改端口和地址）

npm run serve -- --port 端口 --host 地址

        上述代码中的端口需要是未被占用的端口（例如8888），地址为你电脑的ip地址

        前面的npm run serve根据每个人的项目可能会有所不同，例如我的是npm run dev，他的作用是运行vue项目

4、运行后打开的网页的网址就可以正常在移动端打开了（相当于是一个正常的网址）

        网址形式如：http://0.0.0.0:8088/

        即：http://地址:端口号/

        注意：移动端和电脑要在同一局域网下，即连同一个WiFi

总结

        AI有时候真的很能节省我们的精力...之前因为博客上的方法对我基本不起作用，一直在试，试了一个晚上还是失败，AI问了一下就好了...

        命令行真的非常方便，以前觉得终端命令行不仅看不懂，输出的内容还是又臭又长，现在是真香。

        只能说要多看看文档啥的吧，感觉这些应该都有，要么多写点项目做过了就知道了