When will a white screen appear in vue?

There are three situations when a white screen appears in vue: 1. Set the routing mode mode to history; just change it to hash or delete the mode configuration directly. If you must use history, add an override on the server side Candidate resources are sufficient for all situations. 2. The file reference path in the packaged dist directory is incorrect, and an error will be reported because the file cannot be found, resulting in a white screen; just modify the path exported by the bulid module in index.js under the config. 3. The es6 syntax is used in the project, but the browser does not support es6.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

There are several main reasons and solutions for the white screen phenomenon in vue

The first one: because the routing mode mode is set to history, the default is hash.

Solution: Change to hash or delete the mode configuration directly. If you must use it, add a candidate resource on the server that covers all situations.

If you change to history mode, it will be blank when you open it. So change it to hash or delete the mode configuration directly and make it the default. If you must use the history mode, you need to add a candidate resource on the server that covers all situations: if the URL does not match any static resources, it should return an index.html, which is the page your app depends on.

Second type: The file reference path in the packaged dist directory is incorrect, and an error will be reported because the file cannot be found, resulting in a white screen.

Solution: Modify the path exported by the bulid module in index.js under config.

Because the content in index.html is introduced through script tags, and your path is wrong, it will definitely be blank when opened. Let’s take a look at the default path first.

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
  }

The default assetsPublicPath is ‘/’ which is the root directory. Our index.html and static are in the same directory. So change it to ‘./’;

If you still get an error, modify the webpackConfig under the build/webpack.prod.conf.js file, add publicPath: "./" to the output attribute, and re-run the packaging.

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

Third type: The syntax of es6 is used in the project. Some browsers do not support es6, causing compilation errors that cannot be parsed and cause a white screen

Solution : Install Babel, which will translate these new syntaxes into lower versions of code.

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

【Learning video sharing: vue video tutorial, web front-end video】

The above is the detailed content of When will a white screen appear in vue?. For more information, please follow other related articles on the PHP Chinese website!