我使用Capacitor来构建一个使用Vue.js的原生应用。我还在研究开发环境和工作流程。我正试图找出一个配置,将工作在ios模拟器和建设一个实际的ios设计。
我可以使用以下配置在模拟器中进行实时重新加载:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.my_app',
appName: 'My App',
webDir: 'dist',
server: {
androidScheme: 'https',
url: 'http://localhost:5173/',
cleartext: true
}
};
export default config;
但是当我尝试在我的实际iPhone上构建应用程序时,我得到了一个空白的白色屏幕和Xcode中的这个错误:
⚡️ WebView failed provisional navigation
⚡️ Error: Could not connect to the server.
我还在Xcode日志中看到应用程序试图连接到我的本地开发服务器。所以我删除了两行,这可以在我的iPhone上构建:
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'com.example.my_app',
appName: 'My App',
webDir: 'dist',
server: {
androidScheme: 'https',
// url: 'http://localhost:5173/',
// cleartext: true
}
};
export default config;
...但是使用这些配置,实时重新加载在模拟器上不起作用。
我如何配置它,以便我可以构建在物理设备上,并在模拟器上进行实时重新加载开发:
1条答案
按热度按时间izj3ouym1#
解决了!
我错过了两件事:
1.本地开发服务器必须设置为ip:
0.0.0.0
。使用Vue 3/Vite意味着将package.json中的脚本更改为...现在,应用程序成功构建并在模拟器、真实的设备和Web浏览器上实时重新加载。🎉
更新
下面的解决方案有一个恼人的陷阱!如果您使用这些设置构建应用程序,则应用程序将仅在运行开发服务器的本地网络上工作。你可以在配置中注解掉
url: http://...
,然后构建就可以正常工作了,但是这很烦人,也很笨拙。