首页 > 手机调试 React+Webpack 页面的最佳方法?

手机调试 React+Webpack 页面的最佳方法?

我有一个项目用到了 Webpack,React,webpack-dev-server 和 react-hot-loader。应用本身的服务器是 Express,在 3000 端口上。打包的 JS 文件在 webpack-dev-server 上,8080端口。

本地调试没问题,但是现在我想用手机调试网页遇到了问题。

  1. 我可以在手机上通过 <IP:3000> 访问开发机上的页面,但是在 HTML 里引用打包 JS 文件的地址是localhost:8080,手机能访问网页,访问不到 JS。

  2. 我尝试过用 webpack-dev-middleware,通过 Express 中间件提供打包文件,不用另外的服务器。这样没问题。但是因为 nodemon 会自动重启服务器,hot-loader 不能正常工作(用的是 webpack-hot-middleware)。

另外,我有一台云服务器,Nginx 上设置了端口转发,通过 SSH 隧道转到开发机。可以通过域名访问开发机上的页面。相当于直接访问<开发机 IP:3000>,这样访问页面方便点,但还是存在无法访问打包文件的问题。

求指点,怎么设置开发环境,可以兼顾本地开发测试和手机调试页面。


Localhost改成0.0.0.0


你的开发机自己配置一个域名,设置好hosts,本地配置好基于那个域名的访问
然后开启Charles,手机设置全局的代理到Charles的地址上
然后手机通过这个域名访问你的机器

当然了,除了Charles,任意可以做代理的软件其实都可以


题主提到:HTML 里引用打包 JS 文件的地址是localhost:8080。那可以将HTML里的js文件地址作为变量<Static-IP:8080>,开发时配置成开发机的地址,发布时配置成CDN的地址就OK了。

【热门文章】
【热门文章】