Monaca Onsen UI Discord Chat Github Repo

"monaca debug" issues in vue-cordova-webpack template

  • Onsen UI

    @denious As mentioned in that topic, that fix only works for development. I explained it there:

    If you wonder why it is different for development and production, well, Cordova uses file://some/path/www/… for serving files so we cannot use absolute paths, it must be relative.

    Not sure what else can I add to that. If you use an absolute path / it will overwrite Cordova’s file://some/path/, which is mandatory.

    For the fonts, there is a fix in the original template that perhaps you removed.

    For the static files, read more about it in the template docs. Since you’ve updated the public path, you’ll probably need to include static files with img src="static/something.png", without leading /.

  • @Fran-Diox I don’t get your response. You can see in the code and the screenshots above that I removed the “/” from the Production build and that I’m still seeing errors loading fonts. Nothing has been changed in the webpack.base.conf.js file; in fact, the link you posted goes to the code in my own test repository that I posted for you and contains exactly the same code as my actual project minus components and CSS.

    So in my understanding I have followed everything you’ve said and am still getting the error.

    I have updated the repository with your recommended fixes, added a sample test page that has some icons (so needs fonts), and am running all the latest tools and packages. When I run it, the icons don’t display on the page and in Chrome DevTools opened through the Monaca Debugger I get 404s loading fonts.

    Can you please point me to what I need to change in this exact repository to get the fonts to load?
    I’m not trying to argue, Fran, just trying to get my project running.

  • I am getting the same errors cloned the repository and running in local kit version: 2.3.7
    tried on iphone as well icons don’t appear either0_1501868669025_image.png

  • Onsen UI


    in fact, the link you posted goes to the code in my own test repository that I posted for you and contains exactly the same code as my actual project minus components and CSS.

    When I was comparing both configurations, I copied the link from your repo instead of the original template by mistake. This is the one I wanted to share:

    I fixed the link in the previous post as well.

    I’m not in the office right now so I’ll test your repo again on Monday but I think that, if you are using fonts like in the original template, that configuration should make it work in Cordova.

  • This post is deleted!

  • Onsen UI

    @Eric-Hughes I think this is working well in the original template so you guys could just make a new project and move your code there. The vue-router template is just a project created with vue init OnsenUI/vue-cordova-webpack, nothing else :P

    – oops, I just noticed that your comment was deleted so this post might look weird :sweat_smile:

  • could you get this to work with pictures. we’re having a hard time getting the pictures to work on the debugger and on local kit. works fine with npm build:watch and monaca preview, but doesnt load pictures on local kit or with monaca debugger.

    both hard coded and dynamically bound would be awesome thanks alot.

    and yea my deleted comment wasnt ideal solution after peer reviewing with team.

  • Onsen UI

    @ericbehughes Well, the thing is that the original template is working with fonts and pictures in three different ways: loading from src/assets/ directory, loading from static/ directory, and even in CSS background-image: url('../assets/logo.png'). I just tested in Monaca Debugger once again and can’t find any issue with fonts or images.

    I’m sorry if it sounds like I’m repeating myself and it doesn’t help you, but I honestly don’t know how can I fix your issue if it is working well in the original template. Are you loading your assets in a different way that I didn’t mention? Did you modify any other configuration file and perhaps this broke?

    Again, differences between src/assets and static are explained in the official docs of the Vue template. Just consider that the assetsPublicPath for production is '' (relative) for Cordova limitations (it loads everything on file://specific/cordova/path/www/yourApp). By the way, I think LocalKit only uses production builds, so I guess the problem is the same.

    The loaders configuration is in build/webpack.base.conf.js. You can add there any missing extension if it is not provided already.

  • @Fran-Diox Thanks for all your help, we’re up and running. The issue was not the slash (although the slash created another issue), the original issue was the latest version of Monaca Debugger. We upgraded it at the same time as we made changes to the vue router, and thought something went wrong with our configuration. Yesterday, we realized that in the Debugger, once you get the loading bar, the file sync would stop and freeze somewhere in the middle (ex files 2 out of 13) for about 30 seconds to a minute, after which the app would open to a white screen with the errors I originally provided. Clearing the cached files did nothing, but uninstalling and reinstalling the Debugger app fixed everything.

    So if for some reason someone notices that their app has stopped loading for no good reason, try uninstall and reinstall.
    Thanks again for all your help, we did learn a lot about webpack and various config settings thanks to this whole ordeal! :)

  • Onsen UI

    @denious I see, thanks for sharing the end of the story! Yeah, hopefully after this, Webpack is not a black box anymore :stuck_out_tongue: