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



  • @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.

    https://github.com/denious/monaca-vue-webpack-blank

    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

    @denious

    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: https://github.com/OnsenUI/vue-cordova-webpack/blob/master/template/build/webpack.base.conf.js#L75

    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:


Log in to reply