基于vue的服务端渲染框架Nuxt介绍与实践

时间 2019-11-10

标签基于 vue 服务渲染框架 nuxt 介绍实践繁體版

原文原文链接

Nuxt是什么

Nuxt.js 是一个基于 Vue.js 的通用应用框架，经过对客户端/服务端基础架构的抽象组织。
2016年10月发布，运行环境基于vue+webpack+babel,
预置了使用vue开发服务端渲染应用所需的基础配置,
而且集成了vue-router、vuex、vue-meta等vue生太圈经常使用的组件和框架，
使用webpack、vue-loader、babel-loader来处理自动化构建工做。css

Nuxt用来作什么

vue框架因为是单页面SPA应用，故存在SEO、首屏渲染、路由切换时渲染慢，用户体验略差等问题。
因此基于vue的服务端渲染方案应运而生。vue

框架特性

基于vue.js，学习成本低
内置代码分层
服务端渲染
本地开发热更新
SEO及mete头标签管理
nuxt官网node

开发过程及配置

1.安装
配置好node环境和npm之后，经过vue init nuxt/express **脚手架工具生成默认文件。
npm i && npm run dev后打开localhost:3000可看到官方提供的示例。
2 目录介绍
目前所用为1.4版本，所生成的目录以下：jquery

pages:页面组件，Nuxt会根据结构生成对应的路由
componets:公共组件
layouts:宿主页面模板组件，可让不一样的页面使用不一样的布局
assets: 用于webpack打包的静态资源
middleware:中间件，首屏加载和路由跳转前均会执行对应中间件，能够全局配置，也能够部分组件配置
plugins:插件，SPA中经常使用的三方组件(如axios、utils)，或者引入本身编写的三方库
store:内置了vuex，在store目录下增长index.js，返回一个Vue.Store实例便可

3 配置
nuxt.config示例
nuxt以约束文件和nuxt.config.js的方式管理程序和组件之间的关系
nuxt.config.js对应用的扩展主要以下:webpack

build:webpack配置，能够对默认的webpack配置进行扩展
cahe:配置组件缓存
css:全局css样式
dev or env:自定义环境变量,对应webpack.config.js中的变量
head:vue-mete配置，在nuxt.config.js中会应用于全局，在组件中调用则只会应用于组件
loading:nuxt内置的进度条组件，可自定义或引用三方组件
performance: nodejs服务器性能配置
plugins: 划重点，常常用，而且很重要。
plugins会在Nuxt.js 应用实例生成以前加载，如 axios、filter。
支持数组或者对象，ssr属性默认为ture。
可是有部分组件依赖window或者docuemnt对象，须设置为false，即不打包到服务端
脚本中，例如loadsh，依赖window对象，需以下配置ios
```
plugins: [
         {src: '~plugins/lodash.js', ssr: false}
     ],
```

经常使用API

1.asyncData
页面组件加载前调用，可获取当前上下文对象，异步请求的数据会返回给当前组件的data。
注意:此时vue实例还未生成，拿不到this。git

2.middleware
中间件，每次路由切换时调用，例如作登陆判断github

export default function ({ store, redirect }) {
          // If the user is not authenticated
          if (!store.state.authenticated) {
            return redirect('/login')
          }
        }

3.head
修改title和Meta标签
4.vendor
nuxt.config.js的vendor属性，可避免重复打包web

开发中常见问题

1.资源引用
全局资源文件在nuxt.config.js中配置ajax

module.exports = {
  head: {
    script: [
      { src: '                https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?            family=Roboto' }
    ]
  }
}

局部配置
  
  ```
  <script>
    export default {
      head: {
      script: [
      {       src:'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' }
    ],
    link: [
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto'             }
    ]
        }
    }
  </script>
  ```

2.webpack配置扩展

module.exports = {
  build: {
     extend (config, { isDev, isClient }) {
       // ...
     }
  }
}

3.window/Document未定义
只兼容客户端的组件被打包进了服务端脚本中，单独抽出后，放后plugins中，配置时设置ssr为false。组件内引用时，经过process.BROWSER_BUILD判断导入

if (process.BROWSER_BUILD) {
      require('external_library')
    }

4.UI组件选择
目前支持服务端渲染的UI组件不是不少，已尝试过的有PC端element-ui，移动端vux，
详细配置见vux-plugins
和同目录下的vux-components.js

使用element-ui

vender:[
   'element-ui'
 ],
 babel:{
   "plugins": [["component", [
 {
   "libraryName": "element-ui",
   "styleLibraryName": "theme-default"
 },
 'transform-async-to-generator',
 'transform-runtime'
   ]]],
      comments: true
 },
 plugins: [
 { src: '~plugins/element-ui', ssr: true }
 ],
 css: [
 ]
  
~plugins/element-ui.js

      import Vue from 'vue'
      import { Button } from 'element-ui'
      Vue.component(Button.name, Button)

5.rem引入
将rem.js放入pluins中，在nuxt.config中配置ssr为false便可

6.部署
pm2提供了比较好的一套方案。默认服务器有node pm2 git 环境
进入项目目录后执行pm2 deploy production

ecosystem.config.js配置以下

deploy: {
       production: {
           user: '仓库用户名',
           host: '仓库地址',
           ref: 'origin/master 分支名称',
           repo: 'https://***.git 项目git地址',
           path: '/var/www/production 打包后代码目录',
           'post-setup': 'git pull origin develop && ls -la',
           'post-deploy': 'npm install && npm run build && pm2 reload    
            ecosystem.config.js --env production'
           },
       }

项目代码代码地址，有疑问能够提issue。