Ionic iOS模拟器的电容器配置不适用于物理设备

rqcrx0a6  于 2023-09-28  发布在  Ionic
关注(0)|答案(1)|浏览(147)

我使用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;

...但是使用这些配置,实时重新加载在模拟器上不起作用。
我如何配置它,以便我可以构建在物理设备上,并在模拟器上进行实时重新加载开发:

izj3ouym

izj3ouym1#

解决了!
我错过了两件事:
1.本地开发服务器必须设置为ip:0.0.0.0。使用Vue 3/Vite意味着将package.json中的脚本更改为...

"scripts": {
    "dev": "vite --host 0.0.0.0",
  1. vite配置需要将服务器设置为网络上的ip地址
    现在,应用程序成功构建并在模拟器、真实的设备和Web浏览器上实时重新加载。🎉
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.my_app',
  appName: 'My App',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    url: 'http://192.168.x.xx:5173',
    cleartext: true
  }
};

export default config;

更新

下面的解决方案有一个恼人的陷阱!如果您使用这些设置构建应用程序,则应用程序将仅在运行开发服务器的本地网络上工作。你可以在配置中注解掉url: http://...,然后构建就可以正常工作了,但是这很烦人,也很笨拙。

相关问题