@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! :)

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

@Fran-Diox Thanks for the response. Remember this thread?
https://community.onsen.io/topic/1544/problem-requesting-fonts-in-onsenui-vue-cordova-webpack-template/4

I applied the same fix to Production because of the same issue: fonts are not loading without the ‘/’.
What do? Can you please explain how this single slash affects everything?

This is an example of a request URL, getting 404:
file:///data/user/0/mobi.monaca.debugger/files/projects/local/3633730db0734a20c546d5aff9960041bf9102d2l/59889d4dcc49372bf720b9df87150633de3039077fd301c523e977be788b016b /www/static/css/static/fonts /fontawesome-webfont.af7ae50.woff2

Static images (from the actual static folder) are also not loading.

This is the new Production build code.
Same exact issue as in the thread I linked above.

    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../www/index.html'),
        assetsRoot: path.resolve(__dirname, '../www'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }

Files requested by Monaca Debugger:

Results in Chrome DevTools:

@Andi Here’s the full project on GitHub with just one component for testing: https://github.com/denious/monaca-vue-webpack-blank

Comes out blank in my environment with the same issue as above in Chrom DevTools launched through Monaca Debugger:
404 for all static files.

Firewall is OK since I am able to load the app and see the debugger request all the files (see screenshots).

• Samsung Galaxy S7 w/ Android 7.0
• Windows 10 x64 (15063.483)
• Monaca Debugger 6.1.1

@Fran-Diox Thanks for your response. I understand this requirement.

Yes, we did follow this guide and started off with this template.
Please see screenshots in my previous post, it shows the “www” folder with all the files inside.

The Chrome DevTools screenshot is taken with USB debugging from Monaca Debugger.

Got USB debugging to work and here’re further developments: static files aren’t being served.
See below for the folder structure, index.html, and the failed 404 requests in the debugger.

Still no clue how to fix this, though…

<!DOCTYPE html>
<html>
   <head>
      <meta charset=utf-8>
      <title>vue-cordova-webpack</title>
      <script src=https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js></script>
      <script src=https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js></script>
      <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js></script>
      <link href=/static/css/app.39d2c30575368862e7814c7833ec12eb.css rel=stylesheet>
   </head>
   <body>
      <script>console.warn('index.html loaded');</script>
      <div id=app></div>
      <script type=text/javascript src=/static/js/manifest.3cae06e67ad1fa63ae76.js></script>
      <script type=text/javascript src=/static/js/vendor.5c6526a2bcac44902aab.js></script>
      <script type=text/javascript src=/static/js/app.c0e1673d8d64da5e1ce3.js></script>
   </body>
</html>

After running “monaca upload” and then “monaca clone”, I managed to get the .monaca folder and other changes back into my local build. However, the app is still blank when tested with “monaca debug”.

I then added 3 console outputs: index.html, main.js, app.vue. See output of “monaca preview” vs. “monaca debug”.
Again, no error messages anywhere. The app runs fine in “monaca preview”.

Not sure how to proceed, any input?

monaca preview

monaca debug

Running “monaca debug” and connecting to the app through my phone displays a blank page with no errors.

In the command line I get the following message when my phone connects:
Cannot find module ‘…\vue-cordova-webpack\.monaca\project_info.json’

This is correct, and in fact the .monaca directory is missing entirely from the template.

Attempting to run “monaca reconfigure” to generate the missing files, I am presented with the following error:
Something went wrong during reconfiguration. Cannot read property ‘build’ of null

What am I doing wrong and how do I get the app running on my phone?
Thanks!