Vue SSR Demo

특징

참고 : 실제로이 크기의 앱 (각 비동기 청크가 몇 킬로 바이트에 불과한 경우)의 앱에 대해 코드 스플릿에 불필요하거나 추가 CSS 파일 (1KB)을 추출하는 것이 최적이 아닙니다. 지원되는 모든 기능을 보여주는 데모 앱이기 때문에 간단히 사용됩니다. 실제 앱에서는 실제 앱 제약 조건에 따라 항상 측정하고 최적화해야합니다.

• 서버 측 렌더링
  • vue + vue-router + vuex가 함께 작동합니다
  • 서버 측 데이터 사전 가져 오기
  • 클라이언트 측 상태 및 DOM 수화
  • 렌더링 된 구성 요소만으로 사용되는 CSS를 자동으로 인출합니다
  • 예압 / 프리 페치 리소스 힌트
  • 경로 수준 코드 분할
• 프로그레시브 웹 앱
  • 앱이 나타납니다
  • 서비스 직원
  • 100/100 등대 점수
• 단일 파일 VUE 구성 요소
  • 개발 중 핫로드
  • 생산을위한 CSS 추출
• 생기
  • 경로보기를 전환 할 때 효과
  • 플립 애니메이션으로 실시간 목록 업데이트

아키텍처 개요

자세한 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;
        }
      }
  }

특허

MIT