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