Vue SSR Demo

Características

Observação: na prática, é desnecessário dividir o código para um aplicativo desse tamanho (onde cada pedaço assíncrono tem apenas alguns kilobytes), nem é ideal extrair um arquivo CSS extra (que tem apenas 1kb) - eles são usado simplesmente porque este é um aplicativo de demonstração que apresenta todos os recursos suportados. Em aplicativos reais, você deve sempre medir e otimizar com base nas restrições reais do aplicativo.

• Renderização no lado do servidor
  • Vue + vue-router + vuex trabalhando juntos
  • Pré-busca de dados do lado do servidor
  • Estado do lado do cliente e hidratação DOM
  • Incorpora automaticamente CSS usado apenas por componentes renderizados
  • Dicas de recursos de pré-carregamento/pré-busca
  • Divisão de código em nível de rota
• Aplicativo Web Progressivo
  • Manifesto do aplicativo
  • Trabalhador de serviço
  • Pontuação do Farol 100/100
• Componentes Vue de arquivo único
  • Hot-reload em desenvolvimento
  • Extração de CSS para produção
• Animação
  • Efeitos ao alternar visualizações de rota
  • Atualizações de lista em tempo real com FLIP Animation

Visão geral da arquitetura

Um guia detalhado do Vue SSR pode ser encontrado aqui.

Configuração de compilação

Requer Node.js 7+

 # install dependencies
npm install # or yarn

# serve in dev mode, with hot reload at localhost:8080
npm run dev

# build for production
npm run build

# serve in production mode
npm start

proxy nginx

本地host 指向自己的ip地址 test.mac.com

  worker_processes  1;
  events {
      worker_connections  1024;
  }

  http {
      include       mime.types;
      default_type  application/octet-stream;
      log_format main '$request_time $remote_addr - $remote_user [$time_local] '
                      'fwf[$http_x_forwarded_for] tip[$http_true_client_ip] '
                      '$upstream_addr $upstream_response_time $request_time '
                      '$http_host $request '
                      '"$status" $body_bytes_sent "$http_referer" '
                      '"$http_accept_language" "$http_user_agent" ';
      access_log  logs/access.log  main;
      sendfile        on;
      keepalive_timeout  65;
      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Headers X-Requested-With;
      add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
      server {
        listen       80;
        server_name  test.mac.com;
        location / {
            proxy_pass  https://recommender-api-ms.juejin.im;
            proxy_redirect off;
            client_max_body_size   10m;
            client_body_buffer_size  128k;
            proxy_connect_timeout  10;
            proxy_send_timeout   10;
            proxy_read_timeout 10;
            proxy_buffer_size 4k;
            proxy_buffers  32 1024k;
            proxy_busy_buffers_size 2048k;
            proxy_temp_file_write_size  1024k;
        }
          
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
      }
  }

Licença

MIT