【前端】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文件设置永远不缓存 } } } |
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` } } } |