Question

我决定尝试延迟加载路线。在我开始部署新代码之前，一切都很好。现在，某些用户在单击路由器链接时正在尝试错误。

在控制台上显示错误：Error: Loading chunk {N} failed.

ctrl + F5不能解决问题！仅打开隐身窗口或禁用“网络”标签上的缓存即可。

我在互联网上做了一些研究，但无法解决问题... 我不知道实际的问题是什么...关于缓存的问题，但是为什么ctrl + F5不能解决问题？

该项目是Laravel 7.20.0 + Vue（版本：“ vue”：“ ^ 2.6.11”，“ vue-router”：“ ^ 3.3.4”）。

我的webpack配置：

const path = require('path');
const webpack = require('webpack');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CompressionPlugin = require('compression-webpack-plugin');
const moment = require('moment');

module.exports = {
    output: {
        chunkFilename: '[name].js',
    },
    resolve: {
        extensions: ['.js', '.json', '.vue'],
        alias: {
            '@': path.join(__dirname, './resources/js'),
        }
    },
    plugins: [
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
        new BundleAnalyzerPlugin({
            analyzerMode: 'static',
            openAnalyzer: false,
            reportFilename: 'bundle-analyzer-plugin/reports/' + moment().format('YYYYMMDD') + '.html'
        }),
        new CompressionPlugin({
            filename: '[path].gz[query]',
            algorithm: 'gzip',
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.7
        }),
    ],
    optimization: {
        splitChunks: {
            cacheGroups: {
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendors',
                    chunks: 'all'
                }
            }
        }
    }
};

Vuejs延迟加载路由产生错误加载块

0 个答案: