VueJS/浏览器缓存生产构建 [英] VueJS/browser caching production builds
问题描述
我有一个 VueJS 应用.每当我运行 npm run build 时，它都会创建一组新的 dist/* 文件，但是，当我将它们加载到服务器上时(删除旧构建后)，并打开浏览器中的页面，它加载旧版本(我假设来自缓存).当我刷新页面时，它加载新代码没问题.
I have a VueJS app. Whenever I run npm run build it creates a new set of dist/* files, however, when I load them on the server (after deleting the old build), and open the page in browser, it loads the old build (from cache i assume). When I refresh the page, it loads the new code no problem.
这是我的 index.html:
This is my index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
</head>
<body>
<div id="app"></div>
</body>
</html>
有没有办法强制它每次加载新代码，或者(理想情况下)检查旧文件是否从服务器上消失，然后刷新浏览器?
Is there a way to force it to load new code every time or (ideally) to check if the old files are gone from the server, then refresh the browser?
推荐答案
这个问题很烦人，毫无疑问.必须使用在标头中发送的自定义前端版本端点来解决它.我使用 rails 后端和 Vue + Axios 作为前端.请注意，我不需要 Service Worker，因此没有使用.
This problem is annoying, no doubt. Had to solve it using a custom Front end version endpoint sent in the header. I am using a rails backend and Vue + Axios as front-end. Note I don't need a service worker and hence not using one.
本质上，我只是在有获取请求并且应用程序版本已更改时重新加载(服务器可以通知相同)
Essentially I am just reloading whenever there is a get request and that the version of the application has changed (the server can inform the same)
axiosConfig.js
axios.interceptors.response.use(
(resp) => {
const fe_version = resp.headers['fe-version'] || 'default'
if(fe_version !== localStorage.getItem('fe-version') && resp.config.method == 'get'){
localStorage.setItem('fe-version', fe_version)
window.location.reload() // For new version, simply reload on any get
}
return Promise.resolve(resp)
},
)
Rails 后端
application_controller.rb
after_action :set_version_header
def set_version_header
response.set_header('fe-version', Setting.key_values['fe-version'] || 'default')
end
application.rb(CORS 配置假设 Vue 在端口 8080 上运行)
application.rb (CORS config assuming Vue running on port 8080)
config.middleware.insert_before 0, Rack::Cors do
allow do
origins ['localhost:8080', '127.0.0.1:8080']
resource '*', expose: ['fe-version'], headers: :any, methods: [:get, :post, :delete, :patch], credentials: true
end
end if Rails.env.development?
在这里写了一篇详细的文章:https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe
Wrote a detailed article here: https://blog.francium.tech/vue-js-cache-not-getting-cleared-in-production-on-deploy-656fcc5a85fe
这篇关于VueJS/浏览器缓存生产构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
