Vue - cargar recursos estáticos en público en el proyecto - mejora de habilidades

Escenario de aplicación

Al escribir el sistema de administración en segundo plano, encontré un requisito sobre la función del mapa de calor. Se deben cargar diferentes páginas. Esta página debe actualizarse una vez al día, por lo que la solución final para solicitar la página html es: agregar la página html+carpeta correspondiente, colocada en la carpeta pública, y los archivos generados después del empaquetado se almacenarán en la carpeta dist. Al usar esta ruta de página en el proyecto, puede obtenerla directamente a través del 'nombre de página html'.

análisis de la demanda

Como se muestra en la siguiente figura: cada tabetiqueta representa una htmlpágina, haga clic en la correspondiente taby el contenido de la htmlpágina correspondiente se mostrará a continuación.

el código

1. antd-design-vueEl código es el siguiente:

<a-tabs type="card" v-model="activeKey" @change="callback">
  <a-tab-pane v-for="item in data" :key="item.url" :tab="item.url">
  </a-tab-pane>
</a-tabs>
<iframe
  :src="src"
  v-if="src"
  frameborder="0"
  width="100%"
  height="1000"
  id="iframeId"
></iframe>

2. Después de obtener los datos a través de la interfaz, asigne la tecla activa al primer elemento en la lista de pestañas

this.activeKey = this.data && this.data[0] && this.data[0].url;
this.src = this.data && this.data[0] && this.data[0].url + '?' + new Date().getTime();//通过?+时间戳的方式来防止浏览器缓存的出现
this.$nextTick(() => {
    
    //下面的代码是强制刷新iframe的，好像没有什么用处
  document
    .getElementById('iframeId')
    .contentWindow.location.reload(true);
});

3. El método tabactivado al cambiarcallback

callback(val) {
    
    
  this.src = val + '?' + new Date().getTime();
  this.$nextTick(() => {
    
    
    document.getElementById('iframeId').contentWindow.location.reload(true);
  });
},

publichtmlpáginas almacenadas en el archivo

Páginas disten la carpeta empaquetadahtml

El punto es que cuando se carga la misma página, los datos en la página de hoy y la página de ayer son ligeramente diferentes, si el problema del caché del navegador se puede resolver agregando un formulario a la página, lo explicaré después de probar 时间戳.

¡Finalizar! ! !

¡Mucha acumulación, mucha cosecha! ! !