服务端渲染 -- Nuxt.js笔记

目录

项目目录结构

1.nuxt路由机制

2.layouts使用

3.middleware使用

4. plugins

5. next.config.js文件配置

---

第一次接触服务端渲染，从项目入手开始了解

Nuxt.js 是一个基于vue.js的通用应用框架，其核心主要是通过vue-server-renderer模块来实现服务端渲染。 vue-server-renderer是Vue服务端Node.js渲染的一个模块，用来生成HTML内容。

基于 Vue、Webpack 和 Babel。Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：Vue2，Vue Router，Vuex（当配置了 Vuex 状态树配置项 时才会引入），Vue Server Renderer ,vue-mate

Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）

文档：
https://zh.nuxtjs.org/docs/2.x/directory-structure/nuxt-config/

项目目录结构

assets： 资源目录，用于组织未编译的静态资源如 LESS、SASS 或 JavaScript

components：组件目录，用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性

layouts：布局目录 layouts 用于组织应用的布局组件。该目录名为Nuxt.js保留的，不可更改

middleware：中间件目录，目录用于存放应用的中间件

pages：页面目录 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。该目录名为Nuxt.js保留的，不可更改

plugins：插件目录 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件

static：静态文件目录 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。该目录名为Nuxt.js保留，不可更改。

nuxt.config.js 文件：文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。该文件名为Nuxt.js保留的，不可更改

Store 目录：store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js文件可激活这些配置。该目录名为Nuxt.js保留，不可更改

package.json ：文件用于描述应用的依赖关系和对外暴露的脚本接口。该文件名为Nuxt.js保留的，不可更改。

 

1.nuxt路由机制

pages目录中的任何Vue组件都会基于他们的文件名称和目录结构自动添加到vue-router中。Nuxt可以生成对应的路由配置，在.nuxt/rouer.js可以体现出来
在pages文件夹下新建vue组件，即可自动生成对应路径

2.layouts使用

页面模板的作用就是将一个所有页面都会引入的一个组件放在页面模板中，这样就不用在每个页面中去引入这个公共的组件

layouts下会有一个default.vue组件，如果pages里的页面组件没有指定其他页面模板，那么默认就是default.vue模板，再页面模板中也可以引入其他公共的组件

在layouts目录下创建一个新的布局，即.vue文件

<template>
  <div>
    <public-header v-if="$route.path!='/404'&&$route.path!='/500'"></public-header>
    <Nuxt />
    <public-footer v-if="$route.path!='/404'&&$route.path!='/500'"></public-footer>
  </div>
</template>

 

3.middleware使用

中间件（middleware）是允许你定义一个自定义函数（提供了一个context参数，可以获取sever端和client端各种信息）运行在一个页面或布局之前。比如我们在渲染页面之前判断权限的拦截，或者根据用户权限跳转到相应的路由等。 本项目以国际化语言为例，如下配置：
在middleware文件夹中添加 i18n.js
 

export default function ({ app, store, req }) {
    if(req){
        const enus=req.headers['accept-language'].split(/[,|;]/ig).some(item=>item.toLowerCase()=="zh-cn")
        store.commit('SET_LOCALE',app.$cookies.get('locale')?app.$cookies.get('locale'):(enus?"zh-cn":"en-us"))
        app.i18n.locale = store.state.locale
    }
}

在nuxt.config.js中配置：
 

router: {
    middleware: 'i18n'
  },

 

4. plugins

可以配置需要在vue应用实例化之前需要运行的js插件，可以是你自己写的库或是第三方库。比如：对于axios这种ajax请求插件，element-ui第三方库等。就element-ui为例，可以这么配置：
在plugins文件夹中添加插件文件element-ui.js
 

import Vue from 'vue'
import {
    Row,
    Col,
    Button,
    Carousel,
    CarouselItem,
    Dropdown,
    DropdownMenu,
    DropdownItem
} from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
import '~/assets/scss/element-variables.scss'
import 'element-ui/lib/theme-chalk/display.css'
const components = [
    Row,
    Col,
    Button,
    Carousel,
    CarouselItem,
    Dropdown,
    DropdownMenu,
    DropdownItem
];
const Element = {
    install (Vue) {
        components.forEach(component => {
            Vue.component(component.name, component)
        })
    }
}
Vue.use(Element, { locale })

在nuxt.config.js中配置plugins字段

plugins: [
    '@/plugins/element-ui'
  ],

5. next.config.js文件配置

• head 一般用于配置默认的meta标签

• css 用于定义应用的全局样式文件，模块或第三方库

• dev 配置是开发还是生产模式

• loading 个性化定制must.js使用的加载组建

• env 定义用于客户端和服务端的环境变量

 

 

在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。也就是要么创建_id.vue,要么创建_id/index.vue

<nuxt-link :to="'/books/'+i">
</nuxt-link>

pages/books/_id.vue