Wann erscheint ein weißer Bildschirm in Vue?

Es gibt drei Situationen, in denen in Vue ein weißer Bildschirm angezeigt wird: 1. Stellen Sie den Routing-Modus auf „Verlauf“ ein. Ändern Sie ihn einfach in „Hash“ oder löschen Sie die Moduskonfiguration direkt. Fügen Sie auf dem Server einen Kandidaten hinzu, der abgedeckt werden soll In allen Situationen reichen die Ressourcen aus. 2. Der Dateireferenzpfad im gepackten dist-Verzeichnis ist falsch und es wird ein Fehler gemeldet, da die Datei nicht gefunden werden kann, was zu einem weißen Bildschirm führt. Ändern Sie einfach den vom Bulid-Modul in index.js unter der Konfiguration exportierten Pfad. 3. Im Projekt wird die es6-Syntax verwendet, der Browser unterstützt es6 jedoch nicht.

Die Betriebsumgebung dieses Tutorials: Windows7-System, Vue3-Version, DELL G3-Computer.

Es gibt mehrere Hauptgründe und Lösungen für das White-Screen-Phänomen in Vue

Der erste: Da der Routing-Modus auf Verlauf eingestellt ist, ist der Standardwert Hash.

Lösung: Wechseln Sie zum Hash oder löschen Sie die Moduskonfiguration direkt. Wenn Sie sie verwenden müssen, fügen Sie eine Kandidatenressource auf dem Server hinzu, die alle Situationen abdeckt.

Wenn Sie in den Verlaufsmodus wechseln, ist dieser beim Öffnen leer. Ändern Sie es also in Hash oder löschen Sie die Moduskonfiguration direkt und machen Sie sie zur Standardeinstellung. Wenn Sie den Verlaufsmodus verwenden müssen, müssen Sie auf dem Server eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmt, sollte sie eine index.html zurückgeben, also die Seite, von der Ihre App abhängt.

Zweiter Typ: Der Dateireferenzpfad im gepackten dist-Verzeichnis ist falsch und es wird ein Fehler gemeldet, da die Datei nicht gefunden werden kann, was zu einem weißen Bildschirm führt.

Lösung: Ändern Sie den vom Bulid-Modul exportierten Pfad in index.js unter config.

Da der Inhalt in index.html über Skript-Tags eingeführt wird und Ihr Pfad falsch ist, ist er beim Öffnen definitiv leer. Schauen wir uns zunächst den Standardpfad an.

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: './',

    /**
     * Source Maps
     */

    productionSourceMap: false,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // 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
  }

assetsPublicPath ist standardmäßig „/“, was das Stammverzeichnis ist. Unsere index.html und static befinden sich im selben Verzeichnis. Ändern Sie es also in './';

Wenn Sie immer noch eine Fehlermeldung erhalten, ändern Sie die webpackConfig unter der Datei build/webpack.prod.conf.js, fügen Sie publicPath: „./“ zum Ausgabeattribut hinzu und führen Sie es erneut aus die Verpackung.

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  }

Die dritte Methode: Es6-Syntax wird im Projekt verwendet. Einige Browser unterstützen es6 nicht, was zu Kompilierungsfehlern führt, die nicht analysiert werden können und einen weißen Bildschirm verursachen.

Lösung: Installieren Sie Babel, und Babel übersetzt diese neuen Syntaxen in eine niedrigere Version des Codes.

npm install --save-dev @babel/core @babel/cli @babel/preset-env

【Lernvideo-Sharing: Vue-Video-Tutorial, Web-Front-End-Video】

Das obige ist der detaillierte Inhalt vonWann erscheint ein weißer Bildschirm in Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!