Webpack块和vue.js组件的浏览器缓存问题 [英] Browser cache problems with webpack chunks and vue.js components
问题描述
问题
我对缓存的Vue.js组件有问题,无法在设备上重现此问题,但是我们收到的每个客户端更新都抱怨用户界面损坏,只有清除浏览器缓存会有所帮助.
I have a problem with cached Vue.js components and I can't reproduce this problem on my devices but every client-side update we get users complains about broken interfaces and only clearing browser cache helps.
我使用Laravel + Vue.js,它是多页应用程序.
I use Laravel + Vue.js and it's multipage app.
策略
所有组件描述在一个文件中,该文件包含在app.js中,看起来像这样:
All components described in one file which included in app.js and it looks like this:
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异步组件.
There are vue.js async components.
然后我像这样配置了webpack.mix:
And then i have configured webpack.mix like this:
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,然后将其加载到主布局中,如下所示:
I'm using ChunkManifestPlugin here, that plugin creates chunk-manifest.json and i load it in the main layout like this:
window.webpackManifest = JSON.parse(@json(file_get_contents(public_path('/js/chunk-manifest.json'))));
问题
这可能是什么问题?谁能建议解决这个问题的方法?
What could be wrong here? Can anyone suggest the way to solve this?
推荐答案
在 webpack.mix.js
中将其更改为此:
mix.config.webpackConfig.output = {
chunkFilename: 'scripts/[name].[chunkhash].js',
publicPath: '/',
};
有关更多信息,请参考这篇文章.
Refer to this article for more information.
这篇关于Webpack块和vue.js组件的浏览器缓存问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!