HTML-файл без кэша apache Centos7 (VueJS / Quasar Build) - PullRequest
Новая
       20

HTML-файл без кэша apache Centos7 (VueJS / Quasar Build)

0 голосов
/ 26 февраля 2019

Мы создали приложение с помощью vueJs с использованием Quasar Framework

Но после каждой перестройки (с помощью команды сборки quasar, выполняемой gitlab runner) наш основной файл index.html не перезагружается должным образом браузером клиента (кажется, это более хром, чем другой браузер, который хранит index.html в кеше)

В нашем приложении у нас есть много файлов css и js, названных так, например:

  • app.34456435fdfe.js
  • vendor.4325gfd.js
  • runtime.ksdj424.js

Файл приложения js и файл времени выполнения js изменяются правильно, но более старая версия по-прежнему остаетсяв браузер клиента кеша загружен, потому что версия index.html, загружающая эти файлы, не последняя (но они хранятся в браузере кеша)

Я объясняю: сначала соберите app.0000000.js (для примера)и время выполнения. 0123456.js

Второе создает app.000001.js и время выполнения.654321.js

Но две первые версии все еще загружаются в broswer (из-за индекса.HTML-файлкэшируется), поэтому клиент застревает на белой странице (поскольку app.0000000.js все еще не существует, он возвращает 404)

Как заставить принудительно очистить кэш?

В индексе.html файл квазара, который мы добавили: 

<meta http-equiv=“cache-control” content=“no-cache, no-store, private, must-revalidate, post-check=0, pre-check=0”>
<meta http-equiv=“cache-control” content=“max-age=0”>
<meta http-equiv=“expires” content=“0”>
<meta http-equiv=“expires” content=“Tue, 01 Jan 1980 1:00:00 GMT”>
<meta http-equiv=“pragma” content=“no-cache”>

У нас также есть .htaccess с: 

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/html M0
</IfModule>

<IfModule mod_headers.c>
  <filesMatch "\.(html|htm|js|css)$">
    FileETag None
    Header unset ETag
    Header set Cache-Control "no-cache, no-store, must-revalidate"
    Header set Pragma "no-cache"
    Header set Expires 0
  </filesMatch>
  Header unset ETag
  Header unset Last-Modified
</IfModule>

И в файле httpd.conf мы добавили это: 

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresByType text/html M0
</IfModule>

В Safari и Firefox все работает нормально, но в Chrome у нас все еще есть «Загружен из дискового кэша»

Инструмент отладки Chrome

Дополнительные средства отладки

Правильно установлен заголовок

Эта проблема, с которой мы сталкиваемся, является реальной проблемой, которую мы будем использоватьРаботник сервиса через несколько недель, но нам нужно решение для правильной очистки кэша, пока мы не разработаем SW (никакой кеширующий html не будет лучше)

Спасибо!(И извините за мой английский)

NB: я пробовал это: Как управлять кэшированием веб-страниц во всех браузерах? И это: VueJS / браузерная сборка VueJS / браузера (похожая проблема)

...