Проблемы с кешем в браузере с блоками веб-пакетов и компонентами vue.js - PullRequest
Новая
       11

Проблемы с кешем в браузере с блоками веб-пакетов и компонентами vue.js

0 голосов
/ 16 ноября 2018

Проблема

У меня проблема с кэшированными компонентами 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'))));

Вопросы

Что здесь может быть не так? Кто-нибудь может предложить способ решить эту проблему?

1 Ответ

0 голосов
/ 16 мая 2019

В webpack.mix.js измените его на: 

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

См. эту статью для получения дополнительной информации.

...