发布者 3 年前
-Vuejs现在几乎成了单页应用的代名词,但作为单页应用,在搜索引擎的友好程度上显然是不行的,当网站爬虫爬取到vue应用时如果没有做过特殊的处理,爬虫通常是爬取不到页面的主要内容的,因为vue单页应用通常使用的都是前端渲染,而爬虫爬取通常是不执行JS的;所以在种种情况下Vue的服务端渲染显然是作为对SEO优化最好的选择,因此Nuxt.js应运而生。
Nuxt.js 是一个基于 Vue.js 的通用应用框架,它预设了利用 Vue.js 开发 服务端渲染(SSR, Server Side Render) 的应用所需要的各种配置,同时也可以一键生成静态站点。
作为框架,Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等。区别于其他 vue SSR 框架,Nuxt.js 有以下比较明显的特性。
使用基于vue-cli的脚手架工具
$ vue init nuxt-community/starter-template <project-name>
通过此命令行命令初始化一个nuxt项目。
├─assets 资源目录,未编译的静态资源如less、js
├─components 组件目录,例如页面共用的头部,底部
├─layouts 布局目录,例如所有页面都分成三部分,上中下
├─middleware 用于存放应用的中间件,允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。
├─node_modules
├─pages 页面目录,放置页面除去组件后的主要部分
├─index.vue
├─....
├─plugins 插件 例如jq,swiper等插件的文件
├─static 静态文件目录
├─store vuex store
vuex store : vuex状态树
// nuxt.config.js 文件配置
const path = require('path')
module.exports = {
// Headers of the page
head: {
title: '默认共用title', //对应HTML<title />
meta: [ //对应HTML<meta>
{ charset: 'utf-8' },
{ 'http-equiv': 'pragma', content: 'no-cache' },
{ 'http-equiv': 'cache-control', content: 'no-cache' },
{ 'http-equiv': 'expires', content: '0' },
{ content: 'telephone=no', name: 'format-detection' }
],
// html head 中创建 script 标签
script: [
{ innerHTML: require('./assets/js/flexible_nuxt'), type: 'text/javascript', charset: 'utf-8'}
],
// 不对<script>标签中内容做转义处理
__dangerouslyDisableSanitizers: ['script']
},
// Global CSS
css: ['~/assets/css/reset.css', '~/assets/css/main.less'],
// Global env
env: {
__ENV: process.env.__ENV
},
build: {
vendor: ['axios'],
postcss: [
require('postcss-px2rem')({
remUnit: 75
})
],
extend (config, ctx) {
if (ctx.isClient) {
// 拓展 webpack 配置
config.entry['polyfill'] = ['babel-polyfill']
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
// 添加 alias 配置
Object.assign(config.resolve.alias, {
'utils': path.resolve(__dirname, 'utils')
})
}
}
},
plugins: [{src: '~plugins/toast', ssr: false}, {src: '~plugins/dialog', ssr: false}]
}
Nuxt.js 通过 vue-meta 实现头部标签管理,在 nuxt.config.js 中的 head 配置。所有的页面都会走这个配置,如果想要修改某一页面的title,可以在 pages/yourpage.vue 文件下,添加如下配置,这时该页面的标题就变成了“This is Miller”,其余页面还保持原有标题不变。
<script>
export default {
head () {
return {
title:'This is Miller'
}
}
}
//do something
</script>
在config header配置中, __dangerouslyDisableSanitizers: ['script'] 主要是为了不对innerHTML中内容做转义处理
Nuxt.js 依据 pages 目录结构,自动生成 vue-router 模块的路由配置。
详情可查看Nuxt.js官网路由板块
Nuxt.js布局方式如下图所示:
布局配置文件存储在layouts文件夹下,默认布局为default.vue:
<template>
<div id="milleros">
<AppHeader />
<nuxt/>
<AppFooter />
<AppLoading />
</div>
</template>
这里<nuxt/>是一个页面的主体,所有/pages/*.vue中的内容都会插入到此标签中;
<AppHeader />、<AppFooter />、<AppLoading />为conponents组件,是所有页面共用的组件。
所以layouts布局就是配置不同组件和页面主体的结构。
我们可以根据不同的页面定制不同的layouts布局:
<script>
export default {
layout: 'demo_layout',
//do something
}
</script>
在根目录创建 store 目录,就会默认引用 vuex 模块,除此之外,还进行了以下的操作: 1)将 vuex 模块 加到 vendors 构建配置中去; 2)设置 Vue 根实例的 store 配置项。
Nuxt.js 支持两种使用 store 的方式:
Nuxt.js提供了模块方式的简单写法:使用状态树模块化的方式,store/index.js 不需要返回 Vuex.Store 实例,直接将 state、mutations 和 actions 暴露出来即可。示例如下:
export const state = () => ({
accesstoken: ''
})
export const mutations = {
setAccesstoken (state, accesstoken) {
state.accesstoken = accesstoken
}
}
asyncData方法是服务端渲染的重点!!!
因为asyncData可以在组件(仅限于页面组件)每次加载之前被调用。而且可以再服务端或路由调用之前被调用
Nuxt.js 会将 asyncData 返回的数据融合组件 data 方法返回的数据一并返回给当前组件。