laravel - 有没有办法对 Vue 前端进行版本化,并检查后端是否是最新版本?
问题描述
我正在使用 Laravel 和 VueJs 制作 SPA。有时,前端的 .js 文件会缓存在浏览器中,而客户端看不到最新的更新。我正在使用块名称,但仍然由浏览器缓存。
有没有办法使用 Webpack 自动对文件进行版本控制并通知客户端正确更新站点?
更新 > webpack.mix.js:
const path = require('path')
const mix = require('laravel-mix')
const webpack = require('webpack')
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
mix
.js('resources/assets/js/app.js', 'public/dist/js')
.sass('resources/assets/sass/app.scss', 'public/dist/css')
.styles([
'resources/assets/sass/fa/css/fontawesome-all.css',
'public/css/awesome-bootstrap-checkbox.css',
'public/css/inspinia.css',
'node_modules/vue-multiselect/dist/vue-multiselect.min.css'
], 'public/dist/css/all.css')
.sourceMaps()
//.disableNotifications()
if (mix.inProduction()) {
mix.version()
mix.extract([
'vue',
'vform',
'axios',
'vuex',
'jquery',
'popper.js',
'vue-i18n',
'vue-meta',
'js-cookie',
'vue-router',
'sweetalert2',
'vuex-router-sync',
'@fortawesome/fontawesome',
'@fortawesome/vue-fontawesome'
])
}
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
})
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.join(__dirname, './resources/assets/js')
}
},
output: {
chunkFilename: 'dist/js/chunk.[name].[chunkhash].js',
path: process.env.MIX_APP_URL,
publicPath: '/wms/public/'
}
})
解决方案
推荐阅读
- asn.1 - 在 ASN 文件中导入模块时,我们如何获取这些模块或将其设置为导入?
- spring-boot - Open API 3.0.1 SpringBoot RestAPI 中的示例定义之一
- python - 将 Pandas DataFrame 写入 Excel:如何自动调整列宽
- flutter - 无需将 StatefulWidget 参数传递给 State 构造函数。需要说明
- html - 让图像在引导 5 表上不缩小
- mongodb - mongo - 提取子文档字段并转换为数组
- android - 无法再次打开新的蓝牙插座
- node.js - Node.js 应用程序在本地运行,但在 docker 上失败(sh:1:rimraf:未找到)
- python - 无法调用“事件”命令:应用程序已被销毁
- google-business - 为我们自己的网站以外的网站提取 Google 评论