Nuxt.js服务端渲染

Nuxt.js服务端渲染

一、安装

npx create-nuxt-app <项目名> //npx在NPM版本5.2.0默认安装了

配置项：koa+UI+Universal+Axios…

二、页面配置

比如想要生成的链接为http://domain/hot/617464918241
hot为文章分类，617464918241为文章ID，则pages目录为:

├── pages
│   ├── _type
│   │   └── _id.vue
│   │   └── index.vue
│   ├── index.vue
————————————————

index.vue对应为首页，_type/index.vue文件对应为/type，_id.vue文件对应为文章详情页，则用路由的方式体现为:

[
	{
		path:'/',
		component:'pages/index.vue'
	},
	{
		path:'/:type',
		component:'pages/_type/index.vue'
	},
	{
		path:'/:type/:id',
		component:'pages/_type/_id.vue'
	}
]

三、渲染

_type/index.vue，此页面为分类列表页，则要根据分类获取列表，假设无分页的情况下

async asyncData({ params }) {
    const res = await Promise.all([
     axios.get("/apis/api/getArticleList/${params.type}")//params.type == 'hot'
    ]);
    return {
      list: res.data //list
    };
  },

//html
<template>
<p v-for="item in list">
 <nuxt-link :to="{path:`/${item.type}/${item.articleId}`}">{{item.title}}</nuxt-link>
 //点击跳转到文章详情页
<p>
</template>

_id.vue，此页面为文章详情页，假设有标题和内容(富文本编辑内容)

async asyncData({ params }) {
    const res = await Promise.all([
  axios.get(`/apis/api/article/detail/${params.id}`),
  //params.id == '617464918241'
    ]);
    return {
      artData: res.data 
    };
  },

//html
<template>
<h1>{{artData.title}}</h1>
<p v-html="artData.content"></p>
</template>

四、部署

npm install -g pm2 //安装pm2
npm run build //打包
pm2 start npm --name "nuxt-server" -- run start //用pm2守护进程启动服务
pm2 list //查看当前正在运行的实例
//如重新打包后生成新的文件需重启生效：
pm2 restart nuxt-server //nuxt-server 为第一次启动服务时的服务器命名

nginx接口和端口代理这里就不详细介绍了，很多blog都有解说

五、说明

此文章仅仅是一个简单的展示类demo，如有遗漏，欢迎在下方留言批评，并请参考官方网站: Nuxt.js.