How does the vue project make the client (cache) update automatically?

front-end items are often cached by browsers , but in some emergencies, it is often hoped that the cached html and js will not take effect, but go to the server to request the latest html , js and other files.

scenario: when a company"s business changes, it wants to disable a function as soon as possible. Since it often takes longer for the backend to modify, test, and publish , it is often a good way to shield the frontend entry first (emergency of ), but because the frontend is often cached by the browser, some users cannot use the function of that is blocked . And some users can still use it.

so how can modifying static front-end files invalidate those cached clients?

Front-end environment:

vue.js , nginx

Vue.js automatically-updates front-end
Jan.25,2022

found a way: reference . But in this case, html files will not be able to take advantage of the cache.

reference: 

vue-clicssjscssjs
index.htmlindex.htmlindex.html
nginx index.html

    location = /index.html {
        add_header Cache-Control "no-cache, no-store";
    }

no-cache, no-store 
no-cache 304200 
no-store

for projects that generally pass through vue-cli, the default webpack online configuration file configures output : 

filename: utils.assetsPath('js/[name].[chunkhash].js'),

the file name of the dist directory typed out should all be with md5, so that every time the file is modified, the file name of the resource will change

Vue SPA project, Browser and nginx reverse proxy caching solution https://juejin.im/post/5c09cb.

you can refer to this blog
https://blog.csdn.net/weixin_.

Hello, Now that I am packing and deploying to nginx, I have encountered a similar browser cache problem. Have you solved it?

Previous: How to set the request header for PHP swoole websocket client

Next: Vue project strange error report, there is no length in the project but reported "'length' of undefined" error! The error message is as follows

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu