显示空白白屏的iOS模拟器-电容器- Vue.js

Question

感谢您抽出时间查看我的帖子。我在使用电容和Vue.js的移动应用程序项目中遇到了一点麻烦

长话短说，我已经正确地设置了一个正确的Vue.js，因为我使用Node服务器进行了测试，它的功能与我们设置的完全相同。但是当我们使用电容插件用Xcode启动我们的Vue.js产品时，模拟器显示为空白。它确实显示了Capacitor闪屏，并且日志中提到“正在将应用程序加载到capacitor://localhost...”和"Web视图已加载“，但什么都没有。我知道我安装电容器是正确的，因为我已经重试了很多次，而且这也不是火箭科学。我一定是漏掉了一步。我在下面包含了一张截图。

​

​

Answer 1

我有这个问题，也许你也有同样的问题。电容器的默认资源直接是www文件夹。Vue js构建到dist文件夹。对我来说，我“认为”你正在使用一个用Vue CLI创建的应用程序，但你在初始化项目时没有指定dist目录作为你的资产目录。将此代码添加到您的capacitor.config.json

  "webDir": "dist",

然后重新复制资产

npx cap copy

下次初始化使用vue cli创建的vue js项目时，使用npx cap init --web-dir dist指向dist文件夹。如果这不起作用，请让我知道，这样我就可以编辑答案，而不是向下投票。

Answer 2

我在使用react js的电容器时遇到了这个问题，并通过重定向到/home解决了这个问题，例如./

Answer 3

它可能会对你有帮助

解决方案

在您的项目根文件夹中有capacitor.config.json文件。在这个文件中，我们有一个对象，我们需要更改“webDir”默认值为“src”

{…“src”：“webDir”…}

“webDir”值将为“www”。

参考：https://medium.com/@ahmetsezen/ionic-capacitor-app-blank-white-screen-problem-98c0e47ff2d4