kartsims / vue-cordova

Vue.js plugin for Cordova
http://kartsims.github.io/vue-cordova
328 stars 71 forks source link

How to use the merges option #22

Closed lizhen0211 closed 6 years ago

lizhen0211 commented 6 years ago

cordova provide "Using merges to Customize Each Platform"

I've tried to use it in vue-cordova but it doesn't work.

https://cordova.apache.org/docs/en/latest/guide/cli/index.html

While Cordova allows you to easily deploy an app for many different platforms, sometimes you need to add customizations. In that case, you don't want to modify the source files in various www directories within the top-level platforms directory, because they're regularly replaced with the top-level www directory's cross-platform source.

Instead, the top-level merges directory offers a place to specify assets to deploy on specific platforms. Each platform-specific subdirectory within merges mirrors the directory structure of the www source tree, allowing you to override or add files as needed. For example, here is how you might use merges to boost the default font size for Android devices:

Edit the www/index.html file, adding a link to an additional CSS file, overrides.css in this case:

Optionally create an empty www/css/overrides.css file, which would apply for all non-Android builds, preventing a missing-file error. Create a css subdirectory within merges/android, then add a corresponding overrides.css file. Specify CSS that overrides the 12-point default font size specified within www/css/index.css, for example:

body { font-size:14px; } When you rebuild the project, the Android version features the custom font size, while others remain unchanged.

You can also use merges to add files not present in the original www directory. For example, an app can incorporate a back button graphic into the iOS interface, stored in merges/ios/img/back_button.png, while the Android version can instead capture backbutton events from the corresponding hardware button.

kartsims commented 6 years ago

have you tried using the webpack template or a plain vue script ?

lizhen0211 commented 6 years ago

Yes, I have used webpack template .

kartsims commented 6 years ago

when you run npm run build on the webpack template it removes everything in www (or dist if you have the default setup).

did you check that www/css/overrides.css does exist before running npm run ios (or cordova build ios) ?