[Vuejs]-IOS Simulator showing blank white screen – Capacitor – Vue.js

by

4👍

I had this issue and maybe it’s the same for you. The default assets direct for capacitor is the www folder. Vue js builds to the dist folder. For me, and I “think” for you is you’re using a app created with Vue CLI yet you inited your project without specifying the dist directory as your assets directory. Add this to your capacitor.config.json

  "webDir": "dist",

Then re-copy the assets 

npx cap copy

Next time init a vue js project create with vue cli use npx cap init --web-dir dist to point to the dist folder. If this doesn’t work let me know so I can edit the answer rather than downvote.

👤Reginald Goolsby

0👍

I had this problem with the capacitor with react js and solved it with a redirect to /home where it was ./ for example

👤João Manoel

0👍

It may helps you

Solution

In your projects root folder you have capacitor.config.json file. In this file, we have an object, we need to change “webDir” default value is “src”

{
…
“webDir”: “src”
…
}

“webDir” value will be “www”.

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

👤Ahmet Sezen

0👍

I am using Nuxt3 with Capacitor.js.

In my case, the real folder structure in which the project assets was built looked like this /_nuxt/_nuxt/..., but the default configs (from the documentation) are: baseURL: "/" and buildAssetsDir: "/_nuxt/".

So I defined the baseURL parameter in nuxt.config.ts

export default defineNuxtConfig({
    ssr : false,
    app: {
        baseURL: '/_nuxt/'
    }
})

And just in case, don’t forget to change the webDir in capacitor.config.json with

"webDir": ".output/public",
👤Andrej Koval

Leave a comment