Vue SSR Demo

特征

注意：实际上，对于此尺寸的应用程序（每个异步块仅几千字节），不需要代码分解，也不是提取额外的CSS文件（只有1KB）也不是最佳的仅仅是因为这是一个演示应用程序，展示了所有受支持的功能。在实际应用中，您应始终根据实际的应用程序约束来测量和优化。

• 服务器端渲染
  • 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;
        }
      }
  }

执照

麻省理工学院