有没有办法在部署时控制nuxt缓存

Question

使用 Nuxt 时，我会问问题。

当我分发我构建的网站时，缓存问题导致它出现故障。下面有两种情况。有什么办法可以解决它们吗？

1. 如果构建，js 和 css 的文件名将被重命名为哈希值，但它不会通过在浏览器中查看旧缓存来反映。

2. 使用 vue-native webview 创建应用程序 应用程序中的 Web 视图查找了旧的缓存。要应用更改后的 js、css，如何删除过去的缓存？

Answer 1

https://github.com/nuxt/nuxt.js/issues/4764#issuecomment-713469389这个的实现：

添加一个插件文件名 route.client.js
包含在 nuxt.config.json 中

function getClientAppVersion() {
  return localStorage.getItem('APP_VERSION') ?? 0
}
function setClientAppVersion(version) {
 return localStorage.setItem('APP_VERSION', version)
}
export default ({ app }) => {
app.router.afterEach((to, from) => {
fetch("/version.json").then((serverPromise) => 
 serverPromise.json().then((response) => {
  const latestVersion = response.version
  const clientStoredVersion = getClientAppVersion()
  if (clientStoredVersion != latestVersion) {
    window.location.reload(true)
    setClientAppVersion(latestVersion)
  }
  else return
 }))
})}

添加版本.jon 文件

{
 "version": "9.1"
}

Answer 2

如果你对项目使用了run Generation，那么你应该转到 dist/index.html 并将版本设置为所有脚本标记源，如下所示：

以前：

<link rel="preload" href="/_nuxt/d88504d.js" as="script">

后：

<link rel="preload" href="/_nuxt/d88504d.js?v=1.1" as="script">

但是如果你对你的项目使用了运行构建，它会变得有点复杂。在这种情况下，您应该转到：

.nuxt/dist/server

然后，如果您的项目是 SSR，请转到

index.ssr.html

如果您的项目是水疗中心，请转到

索引.水疗.html

然后，您应该像这样更改脚本源版本：

以前：

<script src="/_nuxt/9df4ed5.js"></script>

后：

<script src="/_nuxt/9df4ed5.js?v=1.1"></script>

附言：v=1.1 是一个随机数。你可以使用任何你想要的东西！在任何运行构建或生成之后，您应该更改此数字以强制浏览器重新加载脚本。