Bilakah skrin putih akan muncul dalam vue?

Terdapat tiga situasi apabila skrin putih muncul dalam Vue: 1. Tetapkan mod penghalaan kepada sejarah hanya menukarnya kepada cincang atau padamkan konfigurasi mod secara terus pelayan Sumber calon mencukupi untuk semua situasi. 2. Laluan rujukan fail dalam direktori dist berpakej adalah tidak betul, dan ralat akan dilaporkan kerana fail tidak ditemui, menyebabkan skrin putih hanya ubah suai laluan yang dieksport oleh modul bulid dalam index.js di bawah konfigurasi. 3. Sintaks es6 digunakan dalam projek, tetapi penyemak imbas tidak menyokong es6.

Persekitaran pengendalian tutorial ini: sistem windows7, versi vue3, komputer DELL G3.

Terdapat beberapa sebab dan penyelesaian utama untuk fenomena skrin putih dalam vue

Yang pertama: kerana mod mod penghalaan ditetapkan kepada sejarah, lalai ialah cincang.

Penyelesaian: Tukar kepada cincang atau padam konfigurasi mod secara terus Jika anda mesti menggunakannya, tambahkan sumber calon pada pelayan yang merangkumi semua situasi.

Jika anda menukar kepada mod sejarah, ia akan menjadi kosong apabila anda membukanya. Jadi ubahnya kepada cincang atau padam konfigurasi mod secara terus dan jadikannya sebagai lalai. Jika anda mesti menggunakan mod sejarah, anda perlu menambah sumber calon pada pelayan yang merangkumi semua situasi: jika URL tidak sepadan dengan mana-mana sumber statik, ia harus mengembalikan index.html, iaitu halaman yang bergantung pada apl anda.

Jenis kedua: laluan rujukan fail dalam direktori dist berpakej adalah tidak betul dan ralat akan dilaporkan kerana fail tidak ditemui, mengakibatkan skrin putih.

Penyelesaian: Ubah suai laluan yang dieksport oleh modul bulid dalam index.js di bawah konfigurasi.

Oleh kerana kandungan dalam index.html diperkenalkan melalui tag skrip, dan laluan anda salah, ia pasti akan kosong apabila dibuka. Mari kita lihat laluan lalai dahulu.

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
  }

Aset lalaiPublicPath ialah ‘/’ iaitu direktori akar. index.html dan statik kami berada dalam direktori yang sama. Jadi tukar kepada './';

Jika anda masih mendapat ralat, ubah suai webpackConfig di bawah fail build/webpack.prod.conf.js, tambah publicPath: "./" pada atribut output, dan jalankan semula pembungkusan.

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

Jenis ketiga: sintaks es6 digunakan dalam projek Sesetengah penyemak imbas tidak menyokong es6, menyebabkan ralat kompilasi yang tidak boleh dihuraikan dan menyebabkan skrin putih

<.> Penyelesaian: Pasang Babel, yang akan menterjemahkan sintaks baharu ini kepada versi kod yang lebih rendah.

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

[Belajar perkongsian video:

tutorial video vue, video bahagian hadapan web]

Atas ialah kandungan terperinci Bilakah skrin putih akan muncul dalam vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!