Vue SSR Demo

سمات

ملاحظة: من الناحية العملية، ليس من الضروري تقسيم التعليمات البرمجية لتطبيق بهذا الحجم (حيث يبلغ حجم كل جزء غير متزامن بضعة كيلو بايت فقط)، كما أنه ليس من الأمثل استخراج ملف CSS إضافي (وهو 1 كيلو بايت فقط) -- فهي كذلك يُستخدم ببساطة لأن هذا تطبيق تجريبي يعرض جميع الميزات المدعومة. في التطبيقات الحقيقية، يجب عليك دائمًا القياس والتحسين بناءً على قيود التطبيق الفعلية.

• عرض جانب الخادم
  • Vue + vue-router + vuex يعملون معًا
  • الجلب المسبق للبيانات من جانب الخادم
  • حالة جانب العميل وترطيب DOM
  • يتم تضمين CSS تلقائيًا بواسطة المكونات المعروضة فقط
  • التحميل المسبق / تلميحات الموارد الجلب المسبق
  • تقسيم التعليمات البرمجية على مستوى الطريق
• تطبيق الويب التقدمي
  • بيان التطبيق
  • عامل الخدمة
  • 100/100 درجة المنارة
• مكونات Vue ذات الملف الواحد
  • إعادة التحميل الساخن قيد التطوير
  • استخراج CSS للإنتاج
• الرسوم المتحركة
  • التأثيرات عند تبديل طرق عرض المسار
  • تحديثات القائمة في الوقت الفعلي باستخدام FLIP Animation

نظرة عامة على الهندسة المعمارية

يمكن العثور على دليل Vue SSR المفصل هنا.

بناء الإعداد

يتطلب 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

المضيف المضيف 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;
        }
      }
  }

رخصة

معهد ماساتشوستس للتكنولوجيا