Quand un écran blanc apparaîtra-t-il en vue ?

Il existe trois situations dans lesquelles un écran blanc apparaît dans Vue : 1. Définissez le mode de routage sur historique ; changez-le simplement en hachage ou supprimez directement la configuration du mode. Si vous devez utiliser l'historique, ajoutez un candidat sur le serveur pour couvrir. toutes les situations. Les ressources sont suffisantes. 2. Le chemin de référence du fichier dans le répertoire dist emballé est incorrect et une erreur sera signalée car le fichier est introuvable, ce qui entraînera un écran blanc ; modifiez simplement le chemin exporté par le module bulid dans index.js sous la configuration. 3. La syntaxe es6 est utilisée dans le projet, mais le navigateur ne prend pas en charge es6.

L'environnement d'exploitation de ce tutoriel : système windows7, version vue3, ordinateur DELL G3.

Il existe plusieurs raisons principales et solutions au phénomène d'écran blanc dans Vue

La première : étant donné que le mode de routage est défini sur historique, la valeur par défaut est le hachage.

Solution : Changez pour hacher ou supprimez directement la configuration du mode Si vous devez l'utiliser, ajoutez une ressource candidat sur le serveur qui couvre toutes les situations.

Si vous passez en mode historique, il sera vide lorsque vous l'ouvrirez. Alors changez-le en hachage ou supprimez directement la configuration du mode et faites-en la valeur par défaut. Si vous devez utiliser le mode historique, vous devez ajouter une ressource candidate sur le serveur qui couvre toutes les situations : si l'URL ne peut correspondre à aucune ressource statique, elle doit renvoyer un index.html, qui est la page dont dépend votre application.

Deuxième type : le chemin de référence du fichier dans le répertoire dist emballé est incorrect et une erreur sera signalée car le fichier est introuvable, ce qui entraîne un écran blanc.

Solution : Modifier le chemin exporté par le module bulid dans index.js sous config.

Étant donné que le contenu de index.html est introduit via des balises de script et que votre chemin est erroné, il sera définitivement vide une fois ouvert. Jetons d'abord un coup d'œil au chemin par défaut.

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 par défaut est «/» qui est le répertoire racine. Nos index.html et static sont dans le même répertoire. Alors remplacez-le par './';

Si vous obtenez toujours une erreur, modifiez webpackConfig sous le fichier build/webpack.prod.conf.js, ajoutez publicPath : "./" à l'attribut de sortie et réexécutez l'emballage.

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

La troisième méthode : la syntaxe es6 est utilisée dans le projet. Certains navigateurs ne prennent pas en charge es6, provoquant des erreurs de compilation qui ne peuvent pas être analysées et provoquent un écran blanc

Solution : Installez Babel, et Babel traduira ces nouvelles syntaxes. dans une version inférieure du code.

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

【Partage de vidéos d'apprentissage : tutoriel vidéo vue, vidéo web front-end】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!