首页 前端 正文

解决前端发版页面空白方案

问题背景

每次前端发版上线之后,部分用户打开对应的系统页面空白,每次需要重新清缓存再打开页面才能好,给用户带来极大不好的体验感

原因分析

由于手机客户端浏览器缓存index.html(里面包含了所有的静态文件【js、css 、图片】的引入关系),导致每次用户打开页面的时候会304重定向到缓存的index.html中(其中缓存也是有好处,可以避免每次打开缓慢的问题)。当每次前端发版上线时,会全量的替换所有的静态资源(js、css 、图片),而index.html也更新了最新的静态文件引用关系。而此时用户打开系统页面时因304重定向的原因会出现静态文件【js、css 、图片】找不到的问题导致页面空白。

解决方案

具体原理:前端系统项目代码增加每次打包按规则生成不同的index.html文件名称的功能(此功能只对线上环境,所以增加功能时需要增加环境判断),而上传服务器成功之后,运维人员需要修改ng的配置,将静态资源的代理的index.html名称修改为前端新打包成功的对应文件名称。必须保持统一。

.html文件名称规则

年 + 月 + 日 + '01(当天发版第一个版本是01,如果当天发第二个版本就需要改成02)' + '.html'。例如(2021101901.html)

前端系统项目代码

Vue 2.x 版本

第一步

// 打开config/index.js,在build对象上增加getIndex属性
// 代码如下
module.exports = {
 dev: {...}
 build: {
     getIndex: () => {
         // 判断环境,如果是线上
         if (process.env.NODE_ENV === 'production') {
             let date = new Date()
             let fullYear = date.getFullYear()
             let month = date.getMonth() + 1
             let cDate = date.getDate()
             month = month < 10 ? ('0' + month) : month
             cDate = cDate < 10 ? ('0' + cDate) : cDate
             let strIndex = fullYear + '' + ''+ month + '' + cDate + '01' // 每次线上发版需要修改年月日的后缀'01'或'02'等依次递增
             return path.resolve(__dirname, `../dist/${strIndex}.html`)
         } else {
             return path.resolve(__dirname, `../dist/index.html`)
         }

     },
     ...
 }
}

第二步

// 打开build文件中的webpack.prod.conf.js,找到new HtmlWebpackPlugin()方法,修改filename属性
// 代码如下
plugins: [
    new HtmlWebpackPlugin({
        filename: config.build.getIndex(), // 调用刚刚新增的config.build.getIndex方法即可
        ...
    }),
    ...
]

如果是Vue2.x版本的话,以上修改方法即可。记住每天如果重复发版的化,需要手动修改当天版本号01,02,03,...

Vue 3.x 版本

只需要一步

// 打开vue.config.js,新增configureWebpack.plugins
// 代码如下
// 安装插件html-webpack-plugin

cnpm install -D html-webpack-plugin@4.5.0

// 定义getIndex方法
var HtmlWebpackPlugin  = require('html-webpack-plugin')
const getIndex = () => {
  // 判断环境,如果是线上
  if (process.env.NODE_ENV === 'production') {
    let date = new Date()
    let fullYear = date.getFullYear()
    let month = date.getMonth() + 1
    let cDate = date.getDate()
    month = month < 10 ? ('0' + month) : month
    cDate = cDate < 10 ? ('0' + cDate) : cDate
    let strIndex = fullYear + '' + ''+ month + '' + cDate + '01' // 每次线上发版需要修改年月日的后缀'01'或'02'等依次递增
    return `${strIndex}.html`
  } else {
    return 'index.html'
  }
}
module.exports = {
  // 修改打包后js文件名
  configureWebpack: { // webpack 配置
    // 修改打包后index.html文件名
    plugins: [
      new HtmlWebpackPlugin({
        filename: getIndex(),
        template: 'public/index.html'
      })
    ]
  },
  ...
}

如果是Vue3.x版本的话,以上修改方法即可。记住每天如果重复发版的化,需要手动修改当天版本号01,02,03,...

运维修改ng配置

  1. 第一步

找到前端项目访问域名对应的ng配置文件,例如大麦-总裁版的域名是:xxx.com,项目静态路径是:/aaa/,找到对应ng配置文件:aaa.ng.config。

  1. 第二步

修改代理静态文件的文件名称,代码如下:

server: {
    location /aaa/ {
        index 动态名称.html
    }
}

动态名称的规则:年 + 月 + 日 + '01(当天发版第一个版本是01,如果当天发第二个版本就需要改成02)' + '.html'。例如(2021101901.html)或者发版邮件提供对应的文件名称

  1. 第三步:重启ng配置

打赏
海报

本文转载自互联网,旨在分享有价值的内容,文章如有侵权请联系删除,部分文章如未署名作者来源请联系我们及时备注,感谢您的支持。

转载请注明本文地址:https://www.shouxicto.com/article/1724.html

相关推荐

什么是gRPC

什么是gRPC

前端系统项目代码增加每次打包按规则生成不同的index.html文件名称的功能(此功能只对线上环境,所以增加功能时需要增加环境判断),而...

前端 2022.08.19 0 584

什么是前端工程化?

什么是前端工程化?

前端系统项目代码增加每次打包按规则生成不同的index.html文件名称的功能(此功能只对线上环境,所以增加功能时需要增加环境判断),而...

前端 2022.08.19 0 494

二维码扫码登录的原理是什么?

二维码扫码登录的原理是什么?

前端系统项目代码增加每次打包按规则生成不同的index.html文件名称的功能(此功能只对线上环境,所以增加功能时需要增加环境判断),而...

前端 2022.08.19 0 400

如何快速切换和管理node版本

如何快速切换和管理node版本

前端系统项目代码增加每次打包按规则生成不同的index.html文件名称的功能(此功能只对线上环境,所以增加功能时需要增加环境判断),而...

前端 2022.08.18 0 656

评论列表
可以配合协商缓存和强缓存使用,设置index.html不缓存,其他资源缓存,其次只要代码有变化,打包后文件的hash会变化,而引入其他资源的文件正好是index.html,所以只要html不缓存,一旦发布新的版本,用户请求过来就能获取新的文件。
2021-10-19 15:06:21 回复

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
支付宝
微信
赞助本站