Vue SSR Demo

特徵

注意：在實踐中，沒有必要對這種大小的應用程式進行程式碼分割（其中每個非同步區塊只有幾千位元組），提取額外的 CSS 檔案（只有 1kb）也不是最佳選擇 - 它們是使用只是因為這是一個演示應用程序，展示了所有支援的功能。在實際應用程式中，您應該始終根據實際應用程式限制進行測量和最佳化。

• 伺服器端渲染
  • Vue + vue-router + vuex 協同工作
  • 伺服器端資料預取
  • 客戶端狀態和 DOM 水合作用
  • 自動內聯僅由渲染元件使用的 CSS
  • 預載/預取資源提示
  • 路由級代碼分割
• 漸進式網頁應用程式
  • 應用清單
  • 服務人員
  • 100/100 燈塔評分
• 單一檔案 Vue 元件
  • 開發中的熱重載
  • 用於生產的 CSS 提取
• 卡通
  • 切換路線視圖時的效果
  • 使用 FLIP 動畫即時更新列表

架構概述

詳細的 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 代理

本機指向自己的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;
        }
      }
  }

執照

麻省理工學院