长沙做网站哪里好,网站开发开票交税额,jsp小型网站开发,网站文章更新怎么通知搜索引擎vue-router 中的 createWebHistory#xff0c;createWebHashHistory两种模式
createWebHistory
是基于 window.history 对象是HTML5提供的用于维护当前标签页浏览历史的对象#xff0c;主要功能是前进后退和在不刷新页面的情况下#xff0c;修改地址栏里的URL地址。histor…vue-router 中的 createWebHistorycreateWebHashHistory两种模式
createWebHistory
是基于 window.history 对象是HTML5提供的用于维护当前标签页浏览历史的对象主要功能是前进后退和在不刷新页面的情况下修改地址栏里的URL地址。history 模式就是利用了 HTML5 historyAPI所以也叫 HTML5 模式Vue Router 中是用 createWebHistory() 创建。地址发生变化 都会出现404 而404 会在服务器上映射到index.html中重新请求资源
createWebHashHistory
是用 createWebHashHistory() 创建hash指的是地址中 # 号以及后面的字符这个 # 就是hash符号中文名叫哈希符或锚点哈希符后面的值我们称之为哈希值我们虽然在访问的过程在 URL 会出现#但是此方式不会抱憾在HTTP的请求中所以对服务器没有任何影响因为此方式不经过服务器所以url的hash的改变不会重新加载页面所以如果第一次加载完html 之后在后面操作都会出现不会是最新的资源的情况但是这中对SEO也有影响
缓存
为了后面更好的归类这里我把缓存分为两类一类是静态资源不管是图片 js css 等等 只要是打包生成出来的统一叫静态资源第二种就是动态的 也就是我们在请求服务器的接口动态处理dom 填补动态数据
动态资源缓存问题
不难看出就是请求的url被缓存啦其实也好好处理前端项目基本都是统一的请求器直接在请求器上统一拦截url上加上时间戳后缀这样保证每次url 不是相同的这个在以前的项目中 客户用的ie浏览器get请求 都被缓存这个貌似是IE的特殊性的坑当时就通过时间戳的形式处理如果没有统一的请求器的要么一个一个改要么写个xhr去处理
静态资源缓存问题
无论createWebHistorycreateWebHashHistory的哪一种打包生成的一些静态资源做一次文件签名即可vite.config.js配置处理,这样处理每次打包都会变更js的文件名默认的只会改动变更的文件 build: {hash: true,manifest: true,rollupOptions: {output: {// 入口文件名entryFileNames: assets/[name].${timeStamp}.js,// 块文件名chunkFileNames: assets/[name]-[hash].${timeStamp}.js,// 资源文件名 css 图片等等assetFileNames: assets/[name]-[hash].${timeStamp}.[ext],},},}nginx 上禁止缓存html location /index.html {root /Volumes/wanglaibin/work/vite-project/dist;expires 0;add_header Cache-Control no-cache, no-store, must-revalidate;}index.html 上禁止html meta http-equivCache-Control contentno-cache, no-store, must-revalidate
meta http-equivPragma contentno-cache
meta http-equivExpires content0上面的配置无关createWebHistorycreateWebHashHistory因为只要重新加载html都会请求最新的资源只是createWebHistory相对友好因为每次地址变更都会请求都会经过服务器而createWebHashHistory只有在第一次加载或者F5刷新才会请求资源。
针对createWebHashHistory的缓存方式 该方式如何处理我们都知道每次url地址变更没有经过服务器所以才造成一个后面所有操作都会以第一次的加载html资源做处理后面发布变前端在方式过程中只要不发生重载html的操作都会出现请求旧的资源如果没有访问过资源可能出现找不到资源的情况 我们知道这个造成的原因所以我们通过某种方式来告知相应的版本更新做一次资源的重新加载所以我们只能从路由的钩子上做处理当我们路由变更时请求前端的某个资源文件记录当前的hash值每次变更跟客户端做相应的比较如果不一致直接通知用户当前系统版本升级需要重新加载之后重载整个html的入口目前两种方式可以处理 第一种在 vite中的异常事件中处理在vite加载动态导入失败时会触发 vite:preloadError 事件所以我们监听这个错误事件不过这种如果以前缓存过文件改方式也不会出发最新的操作 window.addEventListener(vite:preloadError, (event) {console.log(检测到有新版本5秒后即将刷新...);// 更好的用户体验 可以做个tipssetTimeout(() {window.location.reload(true) // 例如刷新页面console.log(页面已更新为最新版本...);}, 5000)
})第二种在 打包的过程中我们生成相应的json文件信息在路由的请求的钩子上处理每次路由变更请求对比版本变化来决定是否做一个重载url; 在vite.config.js中编写插件生成相应的json文件 import { fileURLToPath, URL } from node:url
import upgradePlugin from ./version-upgrade-plugin
...
const timeStamp new Date().getTime();
// https://vitejs.dev/config/
export default defineConfig({define: {__APP_VERSION__: timeStamp,},plugins: [...upgradePlugin({version: timeStamp})],...build: {hash: true,manifest: true,rollupOptions: {output: {// 入口文件名entryFileNames: assets/[name].${timeStamp}.js,// 块文件名chunkFileNames: assets/[name]-[hash].${timeStamp}.js,// 资源文件名 css 图片等等assetFileNames: assets/[name]-[hash].${timeStamp}.[ext],},},}
}) version-upgrade-plugin.js export default (options) {let configreturn {name: version-upgrade,configResolved(resolvedConfig) {// 存储最终解析的配置config resolvedConfig},async buildStart() {console.log()console.log(生成项目文件信息)const fs await import(fs).then((module) module.default);const path await import(path).then((module) module.default)// 生成版本信息文件路径const file config.publicDir path.sep version.json// 这里使用编译时间作为版本信息const content JSON.stringify({ version: options.version })if (fs.existsSync(config.publicDir)) {writeVersion(file, content)} else {fs.mkdir(config.publicDir, (err) {if (err) throw errwriteVersion(file, content)})}console.log(config, file)}}
}const writeVersion async (versionFile, content) {const fs await import(fs).then((module) module.default);// 写入文件fs.writeFile(versionFile, content, utf8, (err) {if (err) throw err})
}路由上处理 router.afterEach(async () {await isHeavyLoadPage();
});function isHeavyLoadPage() {if (process.env.NODE_ENV development) returnfetch(version.json?t${Date.now()}).then(res res.json()).then(data {console.log(data)if (__APP_VERSION__ ! data.version) {alert(__APP_VERSION__, data.version)setTimeout(() {window.location.reload(true) // 例如刷新页面console.log(页面已更新为最新版本...);}, 5000)}}).catch(function (e) {console.log(e)})}其实我们做项目找到问题的本质从本质上找相应的解决方案进行处理才不会无任何头绪也不至于没有任何方向
