English
vite-plugin-shopify-theme
手机与局域网调试
让移动设备访问 Shopify 预览和 Vite 资源，并识别局域网 HTTP 与远端 HTTPS 的混合内容边界。
手机调试需要同时解决两个可达性问题：手机要能打开 Shopify CLI 提供的预览，也要能访问开发机上的 Vite 资源。只让 Vite 监听局域网并不足以保证浏览器接受最终资源组合。
检查顺序
- 把 Vite 的
server.host设为0.0.0.0或某个局域网接口； - 把插件选项设为
devOrigin: "network"，让开发形态 Mixer 使用 Vite 的网络地址，而不是只在本机成立的回环地址； - 把 Shopify CLI 原生的
--host参数通过 Theme Run 传入，例如shopify-theme dev --path theme-frame --environment development --host 0.0.0.0； - 确认手机和开发机在同一网络，Shopify 预览和 Vite 两个监听端口均未被防火墙阻止；
- 从 Shopify CLI 输出的局域网预览地址进入，并在手机上检查 Vite 资源请求。
如果 Vite 没有可用的网络地址，devOrigin: "network" 会报错并提示设置 server.host。
HTTPS 与隧道
不要让远端 HTTPS 页面加载局域网 HTTP Vite 地址，浏览器通常会按混合内容阻止。确实需要远端设备访问时，应提供明确的 HTTPS 代理或隧道，并把完整来源交给 devOrigin，例如 https://dev.example.com。该值必须是不含路径、查询参数或 hash 的 HTTP(S) 来源；监听和传输仍由 Vite 配置负责。已安装版本的写法见仓库的手机与局域网调试。