Vue SSR Demo

Caractéristiques

Remarque : en pratique, il n'est pas nécessaire de diviser le code pour une application de cette taille (où chaque morceau asynchrone ne fait que quelques kilo-octets), et il n'est pas non plus optimal d'extraire un fichier CSS supplémentaire (qui ne fait que 1 Ko) : ils sont utilisé simplement parce qu'il s'agit d'une application de démonstration présentant toutes les fonctionnalités prises en charge. Dans les applications réelles, vous devez toujours mesurer et optimiser en fonction des contraintes réelles de votre application.

• Rendu côté serveur
  • Vue + vue-router + vuex travaillant ensemble
  • Prélecture des données côté serveur
  • État côté client et hydratation du DOM
  • Insère automatiquement le CSS utilisé par les composants rendus uniquement
  • Conseils de préchargement/prélecture des ressources
  • Fractionnement du code au niveau de la route
• Application Web progressive
  • Manifeste d'application
  • Employé de service
  • Note Phare 100/100
• Composants Vue à fichier unique
  • Rechargement à chaud en développement
  • Extraction CSS pour la production
• Animation
  • Effets lors du changement de vue d'itinéraire
  • Mises à jour des listes en temps réel avec FLIP Animation

Présentation de l'architecture

Un guide détaillé de Vue SSR peut être trouvé ici.

Configuration de la construction

Nécessite 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 et 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;
        }
      }
  }

Licence

MIT