Descripción del problema
Al crear proyectos de front-end con andamios vue, a menudo se ven afectados por problemas de almacenamiento en caché. La manifestación específica es que cuando se actualiza la versión del programa, los usuarios siguen accediendo a páginas antiguas debido al almacenamiento en caché, y luego muchos estudiantes son muy violentos y agregan directamente a index.html Sube estas pocas líneas de código:
<meta http-equiv = "Expires" content = "0"> <meta http-equiv = "Pragma" content = "no-cache"> <meta http-equiv = "Cache-control" content = "no-cache" > <meta http-equiv = "Cache" content = "no-cache">
El problema de la caché se resolvió durante la actualización, pero provocó directamente que el usuario volviera a solicitar el servidor cada vez que accede a su programa . Todos los recursos estáticos ya no se pueden almacenar en caché, lo que desperdicia tráfico y aumenta la presión de la red.
Necesita aclaración
El problema que realmente debemos resolver no es simplemente almacenar en caché o no, sino esperar que eso dependa de la situación:
1. Después de cada actualización del programa, el usuario no ejecutará el programa anterior debido al problema de la caché.
2. Si el programa no se actualiza, la solicitud de recursos estáticos del usuario puede usar la caché.
Principio de solución
Dado que vue scaffolding agregará un sufijo hash al nombre del archivo de recursos estáticos que se escribe cada vez que se empaqueta, y el sufijo hash correspondiente también se agrega a index.html cuando se introduce, por lo que los recursos estáticos de cada La versión es completamente nueva. No se preocupe por los problemas de almacenamiento en caché causados por la actualización. Luego, deje que index.html no se almacene en caché y otros recursos estáticos se pueden almacenar en caché para cumplir con los requisitos.
El archivo js generado después de empaquetar vue-cli
Es fácil hacer caché de recursos estáticos, el problema es cómo hacer que solo index.html no cache . Aquí ya no podemos confiar únicamente en el código de front-end para lograr esto, necesitamos usar la configuración del servidor. A través de la configuración del servidor, el encabezado al solicitar index.html se establece por separado para lograr el propósito de controlar la caché.
Implementación
Si usa Ngnix:
Ngnix es relativamente fácil de implementar, solo agregue la siguiente configuración:
location = /index.html {
add_header Cache-Control "sin caché, sin almacenamiento";
}
Si usa Tomcat:
Tomcat es un poco más problemático, necesita desarrollar y configurar un filtro (Filtro), si solo comprende el front-end, es posible que deba pedir ayuda a los hermanos back-end.
1. Primero, tenemos que escribir un filtro en java:
Nota: La ruta debe ser coherente con la configuración del tercer paso.
2. Luego escribimos este filtro en un paquete jar con cualquier nombre y lo colocamos en el directorio tomcat / lib.
3. Finalmente, necesitamos modificar el archivo de configuración tomcat / conf / web.xml y agregar el siguiente código encima del final </web-app>:
MyFilter es el nombre que le das al filtro, puedes cambiarlo a voluntad
No es demasiado problema y la mayoría de los estudiantes deberían poder manejarlo.