Vuetify应用在移动浏览器中显示空白页面问题求助

Hey there, let's figure out why your Vuetify app is showing a blank screen on mobile browsers. Looking over your package.json, here are some targeted fixes and checks to try out:

Older mobile browsers often struggle with untranspiled ES6+ code, which is a common culprit for blank screens.

First, make sure your Babel setup is configured to target mobile browsers. Create or update your .babelrc file with:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "iOS >= 9", "Android >= 6"]
      }
    }]
  ]
}

Also, install and import babel-polyfill to add support for missing features. Run npm install babel-polyfill, then add this line at the very top of your main entry file (like main.js):

import 'babel-polyfill'

Vuetify relies on a properly configured viewport to render responsive layouts correctly. If this tag is missing or incorrect, your content might be pushed outside the mobile screen (making it look blank).

Add this to the <head> section of your index.html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Your package.json runs npm run build on postinstall—let's make sure the build itself isn't broken.

• Run npm run build locally to generate the dist folder
• Install a static server globally with npm install -g serve, then run serve dist
• Access the server URL from your mobile device to test if the build works.

If it still shows blank, check your build/webpack.prod.conf.js to ensure:

• Vuetify's CSS is being extracted correctly (using ExtractTextPlugin)
• There are no errors in the build output (like missing dependencies or syntax issues)

Blank screens almost always hide a JavaScript error. Use remote debugging to see what's going wrong:

• For Chrome: Open Chrome DevTools → More Tools → Remote Devices, then connect your mobile device via USB
• Check the Console tab for errors (like missing modules, syntax bugs, or Vuetify initialization issues)
  This will give you the exact root cause instead of guessing.

Make sure you're setting up Vuetify properly in your app entry file. Your main.js should look something like this:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css' // Don't forget this!

Vue.use(Vuetify)

new Vue({
  el: '#app',
  // Your router, store, and component setup here
})

Skipping the CSS import can lead to invisible content (since all styles are missing), which looks like a blank screen.

Mobile browsers love to cache old assets, which can cause new builds to not load correctly. Try:

• Clearing your mobile browser's cache and cookies
• Adding content hashes to your webpack build config (e.g., filename: '[name].[contenthash].js') to force browsers to fetch new files

内容的提问来源于stack exchange，提问作者Clark