m0dch3n / vue-cli-plugin-cordova

Vue Cli 3 Cordova Plugin
MIT License
417 stars 63 forks source link

How can assets from cordova/www be referenced? #5

Closed am closed 6 years ago

am commented 6 years ago

While testing the browser platform I could not figure out how can the assets included in src-cordova/www be referenced from the vue application.

m0dch3n commented 6 years ago

In fact, you don't need src-cordova/www...

It has to be seen more like the /dist folder in vue.

Put your assets etc in vue's public folder, and webpack will copy them to /dist or src-cordova/www on a build for a production build. During development, nothing will be done, as the serve command from vue, is able to serve the files directly from the src folders...

Maybe I should look, if it's possible, to point cordova to the /dist folder instead of /src-cordova/www, so you don't get confused by 2 'build' folders

m0dch3n commented 6 years ago

It seem's it not possible to change the folder:

https://stackoverflow.com/questions/48144693/how-do-i-change-www-to-another-directory-in-cordova

So, I'll close this issue, because as I already said. If you are in a vue cli app, don't put your assets in www, but in public folder...

vesper8 commented 5 years ago

I was still having trouble with this.. this is how I solved it

In main.js I added

Vue.prototype.$baseUrl = process.env.BASE_URL;

And then everywhere throughout my html where I was referencing images such as:

<img class="img-fluid" alt="" src="/theme/img/logo.png">

I changed it to

<img class="img-fluid" alt="" :src="`${$baseUrl}theme/img/logo.png`">

and in my vue.config.js I have

const isAndroid = process.env.npm_lifecycle_event.includes('android');
const isIos = process.env.npm_lifecycle_event.includes('ios');
...
baseUrl: (isAndroid || isIos) ? '' : '/',

thanks to the useful suggestion from @jacobg in https://github.com/m0dch3n/vue-cli-plugin-cordova/issues/31