解决前端发版页面空白方案 |
您所在的位置：网站首页 › 我的苹果浏览器一片空白 › 解决前端发版页面空白方案 |
|
小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。 本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金 问题背景每次前端发版上线之后，部分用户打开对应的系统页面空白，每次需要重新清缓存再打开页面才能好，给用户带来极大不好的体验感 原因分析由于手机客户端浏览器缓存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 [email protected] // 定义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配置 第一步找到前端项目访问域名对应的ng配置文件，例如大麦-总裁版的域名是：xxx.com，项目静态路径是：/aaa/，找到对应ng配置文件：aaa.ng.config。 第二步修改代理静态文件的文件名称，代码如下： server: { location /aaa/ { index 动态名称.html } }动态名称的规则：年 + 月 + 日 + '01（当天发版第一个版本是01，如果当天发第二个版本就需要改成02）' + '.html'。例如（2021101901.html）或者发版邮件提供对应的文件名称 第三步：重启ng配置 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |