Vue SSR Demo

Fitur

Catatan: dalam praktiknya, pemisahan kode untuk aplikasi sebesar ini tidak diperlukan (di mana setiap potongan asinkron hanya berukuran beberapa kilobyte), juga tidak optimal untuk mengekstrak file CSS tambahan (yang hanya berukuran 1kb) -- memang diperlukan digunakan hanya karena ini adalah aplikasi demo yang menampilkan semua fitur yang didukung. Dalam aplikasi nyata, Anda harus selalu mengukur dan mengoptimalkan berdasarkan batasan aplikasi sebenarnya.

• Render Sisi Server
  • Vue + vue-router + vuex bekerja bersama
  • Pengambilan data di sisi server
  • Status sisi klien & hidrasi DOM
  • Secara otomatis menyejajarkan CSS yang digunakan oleh komponen yang dirender saja
  • Petunjuk sumber daya pramuat/pengambilan awal
  • Pemisahan kode tingkat rute
• Aplikasi Web Progresif
  • Manifes aplikasi
  • Pekerja layanan
  • Skor Mercusuar 100/100
• Komponen Vue file tunggal
  • Muat ulang panas sedang dalam pengembangan
  • Ekstraksi CSS untuk produksi
• Animasi
  • Efek saat berpindah tampilan rute
  • Pembaruan daftar waktu nyata dengan FLIP Animation

Ikhtisar Arsitektur

Panduan Vue SSR yang terperinci dapat ditemukan di sini.

Bangun Pengaturan

Membutuhkan 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;
        }
      }
  }

Lisensi

MIT