前后端分离seo

  1. 后端渲染（ssr）：就是服务器先将后台代码在服务端先生产html,浏览器直接接受经过服务器生成的htmk页面
    • 优点：
      1. 前端耗时少（前端只负责html页面的展示）
      2. 更好的seo
    • 坏处： 网络传输数据大，占用服务器资源
  2. 前端渲染(csr) —- spa 单页面应用：浏览器将后端数据，将数据排列成可读的html字符串是由浏览器来完成，形成字符串后再显示
    • 优点： 网路数据小,不占用服务器
    • 缺点：不利于seo,前端耗时多
    • 解决前端渲染SEO问题
      1. SEO
      2. SEO和首屏白屏幕（预渲染）
        • 就是将有些页面直接生产html,在vue打包的时候。这样就可以直接渲染在页面上来了

  3. 同构渲染： 前后端公用js,首次渲染使用Node.js来直出HTML

    NUXT.js

    安装步骤

  4. 安装node.js

  5. 先要安装vue-cli 脚手架 npm install @vue/cli
  6. 安装create-nuxt-app npm install create-nuxt-app
  7. 创建项目
  8. 安装过程程序的问题
    1. 项目名字
    2. 项目作者
    3. 使用第三方框架
    4. 包管理器

目录文件

  • 资源目录 assets
  • 组件目录 components
  • 布局目录 layouts
  • 中间件目录 middleware
  • 页面目录 pages
  • 插件目录 plugins ```
  • 使用第三方模块:
    1. 注入$root和context: 希望在整个应用中使用某个函数和属性值，此时需要将他们注入VUE实例（客户端），context(服务端)甚至store(vues)中
    2. 注入Vue实例: 将内容注入VUE实例，避免重复引入
    3. 注入context
    4. 同时注入 ```
  • 静态文件目录 static
  • store目录
  • nux.config.js nuxt配置文件 类似与webpack.config.js
  • package.js 描述依赖文件和对外暴露借口脚本

别名

  1. 别名    目录<br />    ~ 或 @    srcDir<br />    ~~ 或 @@    rootDir<br />    默认情况下，srcDir 和 rootDir 相同。

配置

  1. bulid

  2. css: 用于定义应用的全局（所有页面都需要的的样式）、模块文件

    1. 使用sass 需要安装 node-sass sass-loader
      1. nuxt.config.js
      2. module.exports = {
      3. css:[
      4. 'bulma',
      5.   // 项目里用css文件
      6. "@/assets/css/main.css",
      7.   // 项目用的scss文件
      8. "@/assets/css/main.scss"
      9. ]
      10. }

  3. dev ：测试环境的配置

  4. env：环境变量配置
  5. generate：
  6. head
  7. loading
  8. moudulesDir
  9. plugins
  10. rootDir
  11. router
  12. server
  13. srcDir
  14. dir
  15. transition

页面的配置

  1. asyncData方法： 支持异步数据处理
    • 在页面每次加载前会调用
  2. fetch: 用于在页面渲染前填充状态树
  3. head: 用来定义每个页面的头部信息
  4. layout: 指定当前页面使用的布局
  5. loading:
  6. transition:指定页面切换的动画
  7. scrollToTop:
    • 布尔值：默认 false
    • 用于是不是需要将当前页面滚动到顶部
  8. validate: 用于检验动态路由参数
  9. middleware: 指定页面的中间件，中间件会在渲染前调用

线上部署

命令 描述
nuxt 启动一个热加载的 Web 服务器（开发模式） localhost:3000
nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）
nuxt start 以生成模式启动一个 Web 服务器 (nuxt build 会先被执行)
nuxt generate 编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)
  1. 在本地 npm run build ，会在.nuxt 文件夹下面生成dist文件
  2. 把本地 .nuxt , static , package.json , nuxt.config.js 四个文件放到服务器目录文件下
  3. 进入文件目录 ，安装以来 npm install -production
  4. npm start 启动 项目

    配置nginx

  • 作用： 客服端访问的地址，通过nginx 的反向代理可以访问服务器

  • 使用yurm安装nginx

    1. $ sudo yum -y install nginx   # 安装 nginx sudo的意思是管理员运行
    2. $ sudo yum remove nginx  # 卸载 nginx

  • nginx -t 查看nginx的地址

nuxt - 图1

  • 修改ngnix的配置

后台可能不会把你的nuxt的项目放到根目录上，所以需要配置下路由

  1. # nuxt.config.js
  3. export default {
  4.   mode: 'universal',
  5.   router: {
  6.     // nginx配置的路径不是根目录，需要给每个路由加上一个nuxt,测试的时候不需要不需要
  7.     base: process.env.NODE_ENV === 'production'?  '/nuxt/':'/'
  8.   },
  9. }

nginx也需要配置，配置完成后需要重启nginx nginx -s reload 

  2. worker_processes  1;
  4.     events {
  5.         worker_connections  1024;
  6.     }
  8.     http {
  9.         include       mime.types;
  10.         default_type  application/octet-stream;
  11.         sendfile        on;
  12.         keepalive_timeout  65;
  14.         server {
  15.             listen       80;
  16.             server_name  www.visney.cn;
  17.             location /nuxt/ {
  18.                 proxy_pass http://127.0.0.1;
  19.                   # http://你的ip/nuxt/
  20.             }
  22.             error_page   500 502 503 504  /50x.html;
  23.             location = /50x.html {
  24.                 root   html;
  25.             }
  26.         }
  27.     }

直接使用 http:// 你的ip/nuxt/ 就可以直接访问

使用npm管理

为了全局管理创建了一个ecosystem.config.js 的文件。
资料来源： 

  1. module.exports = {
  2.   apps : [{
  3.     name : 'TOB_NODE', # 项目名字
  4.     script: 'script: '/data/nuxt/node_modules/nuxt/bin/nuxt.js',   # 项目脚本启动路径 
  5.     cwd: ''  # 项目应用启动路径
  6.     /*
  7.     cwd 应用启动的路径,
  8.     关于script与cwd的区别举例说明：
  9.     在/home/polo/目录下运行/data/release/node/index.js,
  10.     此处script为/data/release/node/index.js，cwd为/home/polo/;
  11.     */ 
  12.        # 开发环境变量
  13.     env: {
  14.       NODE_ENV: 'development'
  15.     },
  16.     # 测试环境变量
  17.     env_testing: {
  18.       NODE_ENV: 'testing'
  19.     },
  20.     // 生产环境变量
  21.     env_production : {
  22.       NODE_ENV: 'production'
  23.     },
  24.     // 实例个数
  25.     instances: 2,
  26.     // 集群模式
  27.     exec_mode: 'cluster',
  28.     // 完整日志路径
  29.     output: '/opt/log/tob/node/output.log',
  30.     // 错误日志路径
  31.     error: '/opt/log/tob/node/error.log',
  32.     // 访问日志路径
  33.     log: '/opt/log/tob/node/tob-log.log',
  34.     // 日志格式
  35.     log_type: 'json',
  36.     // 合并日志
  37.     merge_logs: true,
  38.     // 日志日期格式
  39.     log_date_format: 'YYYY-MM-DD HH:mm:ss'
  40.   }]
  41. };