这篇具有很好参考价值的文章主要介绍了【前端】Vue 部署上线清除浏览器缓存的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。
【前端】Vue 部署上线清除浏览器缓存的方式
修改根目录index.html
在 head 里面添加下面代码
| 1 2 |
<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
|
配置 nginx 不缓存 html
vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题。但是index.html在服务器端可能是有缓存的，需要在服务器配置不让缓存index.html
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
server {
listen 80;
server_name yourdomain.com;
location / {
try_files $uri $uri/ /index.html;
root /yourdir/;
index index.html index.htm;
if ($request_filename ~* .*\.(?:htm|html)$)
{
add_header Cache-Control "no-cache, no-store"; //对html文件设置永远不缓存
}
}
}文章来源地址https://www.toymoban.com/news/detail-492214.html
|
-
no-cache浏览器会缓存，但刷新页面或者重新打开时 会请求服务器，服务器可以响应304，如果文件有改动就会响应200
-
no-store浏览器不缓存，刷新页面需要重新下载页面
打包的文件路径添加时间戳
1、在 vue-cli2.x 创建的项目里，找到 build/webpack.prod.conf.js 文件
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//定义一个变量获取当前时间戳
const version = new Date().getTime();
//output模块将时间戳加入到输出的文件名里
output: {
publicPath: '/',
path: config.build.assetsRoot,
filename: utils.assetsPath(`js/[name].[chunkhash].${version}.js`),
chunkFilename: utils.assetsPath(`js/[id].[chunkhash].${version}.js`)
},
//css文件名加时间戳
new ExtractTextPlugin({
filename: utils.assetsPath(`css/[name].[contenthash].${version}.css`),
allChunks: true,
}),
|
2、在 vue-cli3.x 创建的项目里，打开 vue.config.js 文件 ( 没有该文件自己在 src 同级目录下创建一个 )
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
const version = new Date().getTime();
module.exports = {
outputDir: 'dist', //打包的时候生成的一个文件名
lintOnSave: false,
productionSourceMap: false,
css: {
loaderOptions: {
sass: {
data: `@import "@/components/themes/_handle.scss";`
}
},
// 是否使用css分离插件 ExtractTextPlugin
extract: {
// 修改打包后css文件名 // css打包文件，添加时间戳
filename: `css/[name].${version}.css`,
chunkFilename: `css/[name].${version}.css`
}
},
configureWebpack: {
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
filename: `js/[name].[chunkhash].${version}.js`,
chunkFilename: `js/[id].[chunkhash].${version}.js`
}
}文章来源：https://www.toymoban.com/news/detail-492214.html
}
|
到了这里，关于【前端】Vue 部署上线清除浏览器缓存的方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！
