VuePress: determina si se está ejecutando en contexto de pre-renderizado o en el navegador

Hamish

En la lógica de mi componente Vue en mi sitio VuePress, ¿puedo determinar si se está ejecutando en el contexto de la vuepress buildgeneración del HTML estático o en el contexto de una sesión de navegador genuina?

Mi caso de uso es que estoy usando momentjs para formatear fechas y horas en relación con la fecha y hora actual. p.ej. Para decir "Ayer" en lugar de "2020-04-03".

El problema es que el HTML estático que genera VuePress en el momento de la compilación contiene la frase relativa a la fecha en la que se ejecutó la compilación. Quiero que el HTML estático siempre contenga la fecha y hora absoluta, no la relativa.

Para los visitantes humanos del sitio, Vue ejecuta y reemplaza la fecha / frase pre-renderizada con la frase / fecha correcta recién calculada y no se dan cuenta.

Para los visitantes de la máquina que no ejecutan JavaScript, ven la frase relativa pre-renderizada que solo es correcta el día en que se construyó.

Básicamente quiero hacer algo como esto:

if (/* in context of vuepress pre-rendering */) {
  return 'content for static HTML'; // eg '2020-04-03'
}
// else, In context of visitors browser
return 'my dynamic content that depends on the date at view time'; // eg 'Yesterday'

Gracias por adelantado.

Sun Haoran

Puede intentar separar su código en diferentes ganchos de ciclo de vida para lograrlo.

Genere el tiempo absoluto en el createdgancho de su componente Vue y luego calcule dinámicamente el tiempo relativo en el mountedgancho.

createdse llamará durante ssr y cliente. Pero el código mountedsolo se ejecutará durante el cliente

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en
0

Déjame decir algunas palabras

0Comentarios
Iniciar sesiónRevisión de participación posterior

Artículos relacionados

VuePress no se está ejecutando en el servidor de desarrollo

¿Cómo detectar si el script se está ejecutando en el navegador o en Node.js?

¿Cómo determinar si el código se está ejecutando en el contexto del manejador de señales?

Compruebe si el hilo se está ejecutando o no en c #

Detectar si el código se está ejecutando en el contexto del comando migrate / makemigrations

Parte de mi script en JavaScript no se está ejecutando en el navegador a menos que esté comentado

En Scala.js, ¿cómo puede el código detectar si se está ejecutando en una ventana del navegador o en un WebWorker?

¿Cómo puedo comprobar en tiempo de ejecución si una aplicación de rails se está ejecutando en el contexto de un trabajador sidekiq?

Ionic 5 / Capacitor: ¿Cómo saber si la aplicación se está ejecutando en el navegador o está compilada como aplicación nativa?

Ionic 5 / Capacitor: ¿Cómo saber si la aplicación se está ejecutando en el navegador o está compilada como aplicación nativa?

Ionic 5 / Capacitor: ¿Cómo saber si la aplicación se está ejecutando en el navegador o está compilada como aplicación nativa?

Detectar si la aplicación WPF se está ejecutando o en el visualizador de Windows de Visual Studio

¿Cómo puedo saber si mi aplicación Django se está ejecutando en el servidor de desarrollo o no?

¿Hay alguna forma de determinar si una función se está ejecutando en el documento listo o no?

mostrar el cuadro de diálogo en un momento específico si la aplicación se está ejecutando o cerrada

¿Detectar si el servidor ADB se está ejecutando en Android?

Sepa si el paquete XYZ se está ejecutando en Android

Android determina si el dispositivo está en idioma / diseño de derecha a izquierda

Si el comando se está ejecutando en el retorno de canal incorrecto

Detecta programáticamente si la aplicación se está ejecutando en el dispositivo o simulador

¿Cómo comprobar si el código se está ejecutando en segundo plano o no?

No se puede determinar si la aplicación Xamarin Forms se está ejecutando en el simulador o en el dispositivo

¿Cómo detectar que el navegador se está ejecutando en Safari en iOS 11 a través de JavaScript?

Cómo comprobar si el código se está ejecutando en sitios web de Azure

¿Cómo puede saber si su programa Java se está ejecutando en un contexto GraalVM AOT?

¿Cómo determinar en qué navegador se está ejecutando el script de fondo de su extensión?

¿Cómo determinar en qué navegador se está ejecutando el script de fondo de su extensión?

Userscript convertido en Firefox-addon no se está ejecutando en el navegador

¿Cómo determinar si un complemento de Office se está ejecutando en Excel o Excel Online?

TOP Lista

  1. 1

    ¿Cómo ocultar la aplicación web de los robots de búsqueda? (ASP.NET)

  2. 2

    Pandas의 CSV 파일을 Pandas 데이터 프레임으로 가져 오기

  3. 3

    uitableview delete button image in iOS

  4. 4

    Manera correcta de agregar referencias al proyecto C # de modo que sean compatibles con el control de versiones

  5. 5

    Swift / Firebase : Facebook 사용자가 계정을 만들 때 Firebase 데이터베이스에 제대로 저장하려면 어떻게해야합니까?

  6. 6

    caída condicional de filas desde un marco de datos de pandas

  7. 7

    Link library in Visual Studio, why two different ways?

  8. 8

    Pagination class not getting applied in html

  9. 9

    Que signifie Decimal (-1)?

  10. 10

    UIButton textLabel with different fonts

  11. 11

    WPF pleine largeur DataGridColumn sur la largeur de DataGrid

  12. 12

    Opción de máquina virtual no reconocida 'MaxPermSize = 512m' cuando se ejecuta Zeppelin

  13. 13

    matplotlib로 그래프를 그리는 동안 커서 위치에서 날짜 / 시간을 볼 수 없습니다. "DateFormatter에서 x = 0 값을 찾았습니다"라는 오류가 발생합니다.

  14. 14

    ¿Es posible en Windows evitar que otras aplicaciones se enganchen en las DLL del sistema?

  15. 15

    Error de la base de datos de Android Firebase: Permiso denegado al depurar en un teléfono

  16. 16

    Pandas: suma filas de DataFrame para columnas dadas

  17. 17

    ggplot2: gráfico con líneas y puntos para problemas de leyenda de dos conjuntos de datos

  18. 18

    ¿Cómo especificar el puerto en el que se aloja una aplicación ASP.NET Core?

  19. 19

    Recherche de la position d'index d'une valeur dans r dataframe

  20. 20

    GPU를 사용하여 ffmpeg 필터의 처리 속도를 가속화하는 방법은 무엇입니까?

  21. 21

    nested observables executed one after the other after termination

CalienteEtiquetas

Archivo