Vue SSR Demo

Merkmale

HINWEIS: In der Praxis ist es für eine App dieser Größe (wobei jeder asynchrische Chunk nur wenige Kilobyte ist), und es ist auch nicht optimal, eine zusätzliche CSS-Datei (nur 1 KB) zu extrahieren, wenn es nur ein paar Kilobyte ist)-sie sind nicht optimal-sie sind es Einfach weil dies eine Demo -App ist, die alle unterstützten Funktionen zeigt. In realen Apps sollten Sie immer auf der Grundlage Ihrer tatsächlichen App -Einschränkungen messen und optimieren.

• Serverseite Rendering
  • Vue + Vue-Router + Vuex arbeiten zusammen
  • Serverseitige Daten vor der Abnahme
  • Client-Side-State- und Dom-Flüssigkeitszufuhr
  • Einsteigt automatisch CSS, die nur von gerenderten Komponenten verwendet werden
  • Ressourcenhinweise vorladen / vorab
  • Code-Aufteilung auf Routenebene
• Progressive Web -App
  • App Manifest
  • Dienstangestellter
  • 100/100 Lighthouse Score
• Einzel-Datei-Vue-Komponenten
  • Hot-Reload in der Entwicklung
  • CSS -Extraktion für die Produktion
• Animation
  • Effekte beim Wechseln von Routenansichten
  • Echtzeitlisten-Updates mit Flip-Animation

Architekturübersicht

Hier finden Sie eine detaillierte VUE -SSR -Anleitung.

Setup erstellen

Benötigt 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

Nginx-Proxy

本地 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;
        }
      }
  }

Lizenz

MIT