详解服务端预渲染之Nuxt（介绍篇）

Universal // 渲染所有连接页面
Single Page App // 只渲染当前页面

这些都是比较重要的其他的配置内容就不做介绍了，一路回车即可。

目录结构介绍

assets       // 存放素材(需要执行webpack预处理操作)
components     // 组件
layouts       // 布局文件
static       // 静态文件(不需要webpack预处理操作)
middleware     // 中间件
pages        // 所有页面
plugins       // 插件
server       // 服务端代码
store        // vuex

配置文件

const pkg = require('./package')
module.exports = {
 mode: 'universal',  // 当前渲染使用模式
 head: {    // 页面head配置信息
  title: pkg.name,    // title
  meta: [     // meat
   { charset: 'utf-8' },
   { name: 'viewport', content: 'width=device-width, initial-scale=1' },
   { hid: 'description', name: 'description', content: pkg.description }
  ],
  link: [   // favicon，若引用css不会进行打包处理
   { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
  ] },
 loading: { color: '#fff' },  // 页面进度条
 css: [  // 全局css（会进行webpack打包处理）
  'element-ui/lib/theme-chalk/index.css'
 ],
 plugins: [    // 插件
  '@/plugins/element-ui'
 ],
 modules: [    // 模块
  '@nuxtjs/axios',
 ],
 axios: {},
 build: {   // 打包
  transpile: [/^element-ui/],
  extend(config, ctx) {    // webpack自定义配置
  }
 }
}

Nuxt运行命令

{
 "scripts": {
  // 开发环境
  "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
  // 打包
  "build": "nuxt build",
  // 在服务端运行
  "start": "cross-env NODE_ENV=production node server/index.js",
  // 生成静态页面
  "generate": "nuxt generate"
 }
}

结语

这里简单的对Nuxt做了一些介绍，会持续更新对Nuxt的跟进，希望会对大家有所帮助，如果有什么问题，可以在下面留言。