问题:系统上线后,除了bug。紧急修复后,发现安卓正常,ios上海市有问题。通过debug后发现,ios上缓存严重。于是想到了打包文件加时间戳的方式来去除缓存。
vue2 配置打包输出文件名方式:
const baseUrl = "./"
const timestr = new Date().getTime()
module.exports = {
outputDir: "delixi",
publicPath: baseUrl, // 根据你的实际情况更改这里
// 选项...
lintOnSave: false,
productionSourceMap: false,
devServer: {
port: 8080,
overlay: {
warnings: true,
errors: true
}
},
filenameHashing: false,
configureWebpack: {
performance: {hints: false},
output: {
filename: `js/js[name].${timestr}.js`,
chunkFilename: `js/chunk.[id].${timestr}.js`,
}
},
css: {
extract: {
filename: `css/[name].${timestr}.css`,
chunkFilename: `css/chunk.[id].${timestr}.css`,
}
}
}
附:vite配置打包文件名称加时间戳方式
import { resolve } from 'path';
import { defineConfig, loadEnv } from 'vite';
import vue2 from '@vitejs/plugin-vue2';
const Timestamp = new Date().getTime();//随机时间戳
export default ({ mode }) => {
const { VITE_PORT, VITE_BASE_URL, VITE_PROXY_DOMAIN_REAL } = loadEnv(mode, process.cwd());
return defineConfig({
base: VITE_BASE_URL,
plugins: [vue2()],
resolve: {
alias: {
'@': resolve(__dirname, 'src'),
},
},
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: `true; @import (reference) "${resolve('src/style/variables.less')}";`,
},
math: 'strict',
javascriptEnabled: true,
},
},
},
server: {
// 是否开启 https
https: false,
// 端口号
port: VITE_PORT,
// 监听所有地址
host: '0.0.0.0',
// 服务启动时是否自动打开浏览器
open: false,
// 允许跨域
cors: true,
// 自定义代理规则
proxy: {
'/admin': {
target: VITE_PROXY_DOMAIN_REAL,
ws: true,
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/admin/, ''),
},
'/master': {
target: VITE_PROXY_DOMAIN_REAL,
ws: true,
changeOrigin: true,
// rewrite: (path) => path.replace(/^\/admin/, ''),
},
},
},
build: {
outDir: 'delixi',
// publicPath: './',
// 设置最终构建的浏览器兼容目标
target: 'es2015',
// 构建后是否生成 source map 文件
sourcemap: false,
// chunk 大小警告的限制(以 kbs 为单位)
// chunkSizeWarningLimit: 2000,
// 启用/禁用 gzip 压缩大小报告
reportCompressedSize: false,
rollupOptions: {
output: {
chunkFileNames: `static/js/[name].[hash]${Timestamp}.js`,
entryFileNames: `static/js/[name].[hash]${Timestamp}.js`,
assetFileNames: `static/[ext]/[name].[hash]${Timestamp}.[ext]`,
},
}
},
});
};
这次h5活动遇到的大坑:
1、使用vite做的h5项目,在ios上缓存刷新不掉,或者很久才能刷新掉。打包文件加时间戳,部分手机也无效
2、iOS上,点击事件有时候会失效。或者是路由跳转不过去。同一个手机有时候会发剩,有时候正常。最终重构项目,不使用vite。没有再发生类似问题。。。
推荐:好用的230G电话卡