vue项目使用webpack构建的本地服务环境，在手机上访问调试

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

使用vue脚手架构建的项目，一般在本地localhost运行，配合浏览器的模拟调试工具开发。

如果想看真机环境，又不想build到线上。

webpack能配置电脑本地内网环境指向公网访问的！

1、打开项目的package.json文件，修改里面的script里面的dev

"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --host 192.168.0.100",//就是在原有的基础上在后面加上了 --host就是自己的电脑IP；"start": "npm run dev",


},

#可以打开cmd控制台，输入ipconfig,查看自己的电脑ip;

2、修改好了之后本地电脑访问要把之前网址的localhost换成自己的电脑ip地址；

在config文件里面修改

host: 'localhost', // 把这个也改为你电脑的ip 例：192.168.0.100
port: 8080,
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false,

3、关闭自己的电脑防火墙；

如果不关防火墙，访问不了（#控制面板-->系统和安全-->window防火墙-->）

4、重新启动该项目；

手机上访问你电脑ip,端口号不要忘了加！

编译器修改后 手机上同样也会及时同步的，

更新：vue-cli3.0+ 自带了这个功能

以上是 vue项目使用webpack构建的本地服务环境，在手机上访问调试 的全部内容， 来源链接： utcz.com/z/375909.html

回到顶部