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.