A propriedade render

O Nuxt permite você personalizar as opções do tempo de execução para renderização de páginas

A propriedade bundleRenderer

• Tipo: Object

Use esta opção para personalizar pacote renderizador da Renderização no Lado do Servidor do Vue. Esta opção é ignorada se houver definido ssr: false.

export default {
  render: {
    bundleRenderer: {
      directives: {
        custom1(el, dir) {
          // alguma coisa...
        }
      }
    }
  }
}

Saiba mais sobre as opções disponíveis na Referência da API de Renderização no Lado do Servidor do Vue . É recomendado não usar esta opção visto que o Nuxt já está fornecendo os melhores padrões de renderização no lado do servidor e uma configuração errada pode levar a problemas na Renderização no Lado do Servidor.

A propriedade etag

• Tipo: Object
  • Valor padrão: { weak: true }

Para desativar o etag para páginas defina etag: false

Consulte a documentação do etag para conhecer as possíveis opções.

Você pode usar a sua própria função hash ao especificar etag.hash:

import { murmurHash128 } from 'murmurhash-native'

export default {
  render: {
    etag: {
      hash: html => murmurHash128(html)
    }
  }
}

Neste caso usamos o murmurhash-native , o qual é mais rápido para tamanhos de corpo de HTML muito maiores. Repare que a opção weak é ignorada, quando estiver especificando a sua própria função de hash.

A propriedade compressor

• Tipo Object
  • Valor padrão: { threshold: 0 }

Quando estiver fornecendo um objeto, o intermediário do compression será usado (com as respetivas opções).

Se você quiser usar o seu próprio intermediário de compressão, você pode referenciar ele diretamente (por exemplo, otherComp({ myOptions: 'example' })).

Para desativar a compressão, use compressor: false.

A propriedade fallback

• Tipo Object
  • Valor padrão: { dist: {}, static: { skipUnknown: true } }
  • a chave dist é para rotas correspondentes ao publicPath (por exemplo: /_nuxt/*)
  • a chave static é para rotas correspondentes ao /*

Os valores dist e static são encaminhados para o intermediário serve-placeholder .

Se você quiser desativar um deles ou ambos, você pode passar um valor de falsidade.

Exemplo permitindo a extensão .js para roteamento (por exemplo: /repos/nuxt.js):

export default {
  render: {
    fallback: {
      static: {
        // Evite enviar o 404 para estas extensões
        handlers: {
          '.js': false
        }
      }
    }
  }
}

A propriedade http2

• Tipo Object
  • Valor padrão: { push: false, pushAssets: null }

Ativa o empurrar de cabeçalhos de HTTP2

Você pode controlar quais ligações empurrar usando a função pushAssets.

Exemplo:

pushAssets: (req, res, publicPath, preloadFiles) =>
  preloadFiles
    .filter(f => f.asType === 'script' && f.file === 'runtime.js')
    .map(f => `<${publicPath}${f.file}>; rel=preload; as=${f.asType}`)

Você pode adicionar adicionar os seus próprios recursos ao arranjo também. Usando o req e o res você pode decidir quais ligações para empurrar baseado nos cabeçalhos da requisição, por exemplo usando o cookie com a versão da aplicação.

Os recursos serão juntados com o , e passados como um cabeçalho Link único.

A propriedade asyncScripts

• Tipo: Boolean
  • Valor padrão: false

Adiciona um atributo async para os marcadores de <script> para pacotes do Nuxt, habilitando eles a serem requisitados em paralelo para parseamento (disponível desde a versão 2.14.8+ do Nuxt). Mais informações .

A propriedade injectScripts

• Tipo: Boolean
  • Valor padrão: true

Adiciona o <script> para os pacotes do Nuxt, defina ele para false para renderizar HTML puro sem JavaScript (disponível desde a versão 2.14.8+ do Nuxt)

A propriedade resourceHints

• Tipo: Boolean
  • Valor padrão: true

Adiciona as ligações prefetch e preload para acelerar o tempo de carregamento da página.

Você talvez queira apenas desativar esta opção se você tiver muitas páginas e rotas.

A propriedade ssr

• Tipo: Boolean
  • Valor padrão: true
  • false only client side rendering

Ativa a Renderização no Lado do Servidor

Esta opção é automaticamente definida baseada no valor global de ssr se não for fornecida. Isto pode ser útil para dinamicamente ativar/desativar a Renderização no Lado do Servidor em tempo de execução depois da construção da imagem (com o docker por exemplo).

A propriedade crossorigin

• Tipo: String
• Valor padrão: undefined
  Configura o atributo crossorigin nos marcadores <link rel="stylesheet"> e <script> dentro do HTML gerado.
  Mais Informações: atributos de definições de CORS

A propriedade ssrLog

• Tipo: Boolean | String
  • Valor padrão: true em modo de desenvolvimento e false em produção

Encaminha os registos do lado do servidor para o navegador para melhor depuração (apenas disponível em desenvolvimento)

Para colapsar os registos, use o valor 'collapsed'.

A propriedade static

• Tipo: Object
  • Valor padrão: {}

Configura o comportamento do diretório static/

Consulta a documentação serve-static para conhecer as possíveis opções.

Adicionalmente a eles, nós introduzimos uma opção prefix a qual valor padrão é definida para true. Ela adicionará a base do roteador aos seus recursos estáticos.

Exemplo:

• Recursos: favicon.ico
• Base do Roteador: /t
• Com o prefix: true (valor padrão): /t/favicon.ico
• Com o prefix: false: /favicon.ico

Avisos:

Algumas restrições de URL podem não respeitar o prefixo.

A propriedade dist

• Tipo: Object
  • Valor padrão: { maxAge: '1y', index: false }

Opções usadas para servir a distribuição de ficheiros. Somente aplicável em produção.

Consulte a documentação serve-static para conhecer as possíveis opções.

A propriedade csp

• Tipo: Boolean ou Object
  • Valor padrão: false

Use isto para configurar a Política de Segurança de Conteúdo para carregar recursos externos

Pré-requisitos:

Estas definições de Política de Segurança de Conteúdo apenas são eficazes quando estiver usando o Nuxt com o target: 'server' para servir a sua aplicação Renderizada no Lado do Servidor. As políticas definidas conforme o csp.policies são adicionadas ao cabeçalho Content-Security-Policy da resposta do HTTP.

Atualizando definições:

Estas definições são lidas pelo servidor do Nuxt diretamente a partir do ficheiro nuxt.config.js. Isto significa para mudanças para essas definições tem efeito quando o servidor é reiniciado. Não há necessidade de reconstruir a aplicação para atualizar as definições da Política de Segurança de Conteúdo.

Marcador meta do HTML:

NO sentido de adicionar <meta http-equiv="Content-Security-Policy"/> ao <head> você precisa definir o csp.addMeta para true. Repare que essa funcionalidade é independente da configuração do csp.policies:

• ele apenas adiciona uma política do tipo script-src, e
• a política script-src apenas contém os hashes dos marcadores <script> em linha.

Quando o csp.addMeta estiver definido para true, o conjunto completo das políticas definidas continuam a serem adicionadas ao cabeçalho da resposta do HTTP.

Repare que as hashes da Política de Segurança de Conteúdo não serão adicionadas como <meta> se a política script-src conter o 'unsafe-inline'. Isto é para navegador ignorar 'unsafe-inline' se as hashes estiverem presentes. Defina a opção unsafeInlineCompatibility para true se você quiser ambas hashes e o 'unsafe-inline' para compatibilidade com a versão 1 da Política de Segurança de Conteúdo. Neste caso o marcador <meta> continuará contendo somente as hashes dos marcadores <script> em linha, e as políticas definidas conforme csp.policies serão usadas dentro do cabeçalho Content-Security-Policy da resposta do HTTP.

export default {
  render: {
    csp: true
  }
}

// OU

export default {
  render: {
    csp: {
      hashAlgorithm: 'sha256',
      policies: {
        'script-src': [
          'https://www.google-analytics.com',
          'https://name.example.com'
        ],
        'report-uri': ['https://report.example.com/report-csp-violations']
      },
      addMeta: true
    }
  }
}

// OU
/*
  O seguinte exemplo permite o Google Analytics, LogRocket.io, e o Sentry.io
  fazerem o registo e rastreio analítico.

  Consulte este blogue no Sentry.io
  https://blog.sentry.io/2018/09/04/how-sentry-captures-csp-violations

  Para saber qual ligação de rastreio você deve usar.
*/
const PRIMARY_HOSTS = `loc.example-website.com`
export default {
  render: {
    csp: {
      reportOnly: true,
      hashAlgorithm: 'sha256',
      policies: {
        'default-src': ["'self'"],
        'img-src': ['https:', '*.google-analytics.com'],
        'worker-src': ["'self'", `blob:`, PRIMARY_HOSTS, '*.logrocket.io'],
        'style-src': ["'self'", "'unsafe-inline'", PRIMARY_HOSTS],
        'script-src': [
          "'self'",
          "'unsafe-inline'",
          PRIMARY_HOSTS,
          'sentry.io',
          '*.sentry-cdn.com',
          '*.google-analytics.com',
          '*.logrocket.io'
        ],
        'connect-src': [PRIMARY_HOSTS, 'sentry.io', '*.google-analytics.com'],
        'form-action': ["'self'"],
        'frame-ancestors': ["'none'"],
        'object-src': ["'none'"],
        'base-uri': [PRIMARY_HOSTS],
        'report-uri': [
          `https://sentry.io/api/<project>/security/?sentry_key=<key>`
        ]
      }
    }
  }
}