NUXT使用的一些记录前后端分离seo 后端渲染（ssr）：就是服务器先将后台代码在服务端先生产html,浏览器直接接受

前后端分离seo

后端渲染（ssr）：就是服务器先将后台代码在服务端先生产html,浏览器直接接受经过服务器生成的htmk页面

优点：

前端耗时少（前端只负责html页面的展示）
更好的seo

坏处：网络传输数据大，占用服务器资源

前端渲染(csr) --- spa 单页面应用：浏览器将后端数据，将数据排列成可读的html字符串是由浏览器来完成，形成字符串后再显示

优点：网路数据小,不占用服务器
缺点：不利于seo,前端耗时多
解决前端渲染SEO问题

vue---ssr ssr.vuejs.org/zh
vue---Nuxt.js nuxtjs.org/

SEO和首屏白屏幕（预渲染）

就是将有些页面直接生产html,在vue打包的时候。这样就可以直接渲染在页面上来了

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

NUXT.js

安装步骤

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

目录文件

资源目录 assets
组件目录 components
布局目录 layouts
可以有多个布局。但是需要放在layouts文件下。
在page的页面layout字段可以用来指定使用那个layout。不指定使用默认
中间件目录 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 描述依赖文件和对外暴露借口脚本

别名

别名目录

~ 或 @ srcDir

~~ 或 @@ rootDir

默认情况下，srcDir 和 rootDir 相同。

配置

export default {  mode: 'universal',  /*  ** 页面的头部信息  */  head: {    // 配置页面名称    title: process.env.npm_package_name || '',    // 配置页面的meta    meta: [      { charset: 'utf-8' },      { name: 'viewport', content: 'width=device-width, initial-scale=1' },      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }    ],    link: [      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }    ]  },  // 配置一个全局的中间件  router:{    middleware: ['index'] //直接写中间件文件名，比如middleware/auth.js，直接写auth就ojbk },  /*  ** Customize the progress-bar color  */  loading: { color: '#fff' },  /*  ** 全局css,  */  css: [    'element-ui/lib/theme-chalk/index.css'  ],  /*  ** Plugins to load before mounting the App  */  plugins: [    '@/plugins/element-ui',  ],  /*  ** Nuxt.js dev-modules  */  buildModules: [  ],  /*  ** 配置node_modules文件  */  modules: [  ],  /*  ** Build configuration  */  build: {    transpile: [/^element-ui/],    /*    ** You can extend webpack config here    */    extend (config, ctx) {    }  }}

页面的配置

asyncData方法：支持异步数据处理,在页面每次加载前会调用
fetch: 用于在页面渲染前填充状态树
head: 用来定义每个页面的头部信息
layout: 指定当前页面使用的布局
loading:
transition:指定页面切换的动画
scrollToTop:

布尔值：默认 false
用于是不是需要将当前页面滚动到顶部

validate: 用于检验动态路由参数
middleware: 指定页面的中间件，中间件会在渲染前调用

线上部署

命令

描述

nuxt

启动一个热加载的 Web 服务器（开发模式） localhost:3000

nuxt build

利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）

nuxt start

以生成模式启动一个 Web 服务器 (nuxt build 会先被执行)

nuxt generate

编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)

在本地 npm run build ，会在.nuxt 文件夹下面生成dist文件
把本地 .nuxt , static , package.json , nuxt.config.js 四个文件放到服务器目录文件下
进入文件目录，安装以来 npm install -production
npm start 启动项目

配置nginx

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

$sudo yum -y install nginx # 安装 nginx sudo的意思是管理员运行$ sudo yum remove nginx # 卸载 nginx
nginx -t 查看nginx的地址

修改ngnix的配置

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

# nuxt.config.js

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

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

worker_processes  1;

    events {
        worker_connections  1024;
    }

    http {
        include       mime.types;
        default_type  application/octet-stream;
        sendfile        on;
        keepalive_timeout  65;  // 超时时间

        server {
            listen       80; // 监听端口
            server_name  www.visney.cn;
            location /nuxt/ {
                proxy_pass http://127.0.0.1;
                # http://你的ip/nuxt/
            }

            error_page   500 502 503 504  /50x.html;  // 错误页面
            location = /50x.html {
                root   html;
            }
        }
    }

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