Fixing blank screen on Cordova/PhoneGap and Vue

Aug 31, 2018 - 1 min read

Is your Vue application working fine in the browser, but showing a blank screen in Cordova/PhoneGap?

Configuring baseUrl

Set the baseUrl of your Vue application to be an empty string:

// vue.config.js
module.exports = {
  baseUrl: ""

Tip: vue.config.js is located in the root of your Vue app. If it’s missing, you can simply create it.

Why it happens

With Cordova, files are served through the file:/// protocol. This does not play well with paths Vue generates by default. This is because default value for baseUrl is '/':

<link href=/js/about.b84c2665.js>
<link href=/css/app.2d819e90.css>

Once configured to an empty string, paths are generated without the '/' in front:

<link href=js/about.b84c2665.js>
<link href=css/app.2d819e90.css>

And now it works. Simple.