Question

问题

我对缓存的Vue.js组件有问题，无法在设备上重现此问题，但是我们收到的每个客户端更新都抱怨用户界面损坏，仅清除浏览器缓存会有所帮助。

我使用Laravel + Vue.js，它是多页应用程序。

策略

所有组件描述在一个文件中，该文件包含在app.js中，看起来像这样：

Vue.component('task-feed', () => import('./components/task/task-feed'/* webpackChunkName: "/js/components/task-feed" */));
Vue.component('task-item', () => import('./components/task/task-item'/* webpackChunkName: "/js/components/task-item" */));

有vue.js异步组件。

然后我像这样配置了webpack.mix：

let mix = require('laravel-mix');
const webpack = require('webpack');
const ChunkManifestPlugin = require('chunk-manifest-webpack-plugin');
const WebpackChunkHash = require('webpack-chunk-hash');
mix.disableNotifications();
let config = {
    watchOptions: {
        ignored: /node_modules/
    },
    resolve: {
        alias: {
            'vue$': mix.inProduction() ? 'vue/dist/vue.runtime.min.js' : 'vue/dist/vue.runtime.js',
        }
    },
    output: {
        chunkFilename: mix.inProduction() ? '[name].[chunkhash].js' : '[name].js',
    },
    plugins: [
        new webpack.HashedModuleIdsPlugin(),
        new WebpackChunkHash(),
        new ChunkManifestPlugin({
            filename: '/js/chunk-manifest.json',
            manifestVariable: 'webpackManifest',
            inlineManifest: true,
        }),
    ],
};

mix.webpackConfig(config);

我在这里使用ChunkManifestPlugin，该插件创建了chunk-manifest.json，然后将其加载到主布局中，如下所示：

window.webpackManifest = JSON.parse(@json(file_get_contents(public_path('/js/chunk-manifest.json'))));

问题

这可能是什么问题？谁能建议解决这个问题的方法？

Answer 1

在webpack.mix.js中将其更改为此：

mix.config.webpackConfig.output = {
    chunkFilename: 'scripts/[name].[chunkhash].js',
    publicPath: '/',
};

有关更多信息，请参见this article。

Answer 2

配置webpack.mix.js以对文件进行版本控制

let version = 0;

mix.config.webpackConfig.output = {
    chunkFilename: 'v/' + version + '/scripts/[name].js',
    publicPath: '/',
};

mix.js('resources/js/app.js', 'public/v/'+version+'/js')
    .sass('resources/sass/app.scss', 'public/v/'+version+'/css');

Webpack块和vue.js组件的浏览器缓存问题

2 个答案: