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.