服务端渲染我们也叫ssr，通常用来优化seo、首屏渲染等等。这里我们主要讲一讲我所了解的nuxt形态，怎么初始化和简单构建一个nuxt项目。
1. nuxt 从0开始新建一个项目
(这段源自于官方文档，文档里也有项目模板生成器，用于学习我更推荐这种方式)
mkdir nuxt-demo
cd nuxt-hello
yarn add nuxt
新建一个pages文件夹
mkdir pages
在pages里新建一个index.vue
<template>
<div>
<h1>Hello nuxt!</h1>
<h2>This is {{page}}</h2>
</div>
</template>
<script>
export default {
data () {
return {
page: 'ssr'
}
}
}
</script>
修改package.json
{
"scripts": {
"dev": "nuxt"
},
"dependencies": {
"nuxt": "^2.10.2"
}
}
运行
yarn dev
hello nuxt.png
看一下源码， 我们发现是有的，说明成功了
view-souce localhost3000.png
2. nuxt 之异步渲染（nuxt-ssr核心功能）
举一个常见的业务例子，假如我们有一个产品的详情页面，通常非ssr的做法是，当用户访问一个 product.html?id=1的页面，前端获取id这个参数，通过api请求获取内容然后通过vue渲染出来展示给用户。
而我们要实现服务端渲染，就需要将这个请求过程放在服务端了，而nuxt提供一个服务端的钩子函数：asyncData，如果说mounted是客户端的初始化函数，那么asyncData你可以理解为nuxt.js在服务端执行的生命周期函数，具体实现我们直接上代码。
在pages下，新建一个product.vue文件
<template>
<div>
<h2>{{product.id}}</h2>
<h3>{{product.title}}</h3>
</div>
</template>
<script>
// 我们这里模拟一个异步请求
function mockApi (id) {
return new Promise((r, j) => {
setTimeout(() => {
r({
id: id,
title: `这是一个产品:${id}`
})
}, 500)
})
}
export default {
async asyncData ({query}) {
let id = query.id
let rs = await mockApi(id)
return {
product: rs
}
}
}
</script>
访问localhost:3000/product?id=2, 可以看到成功了，看一下源码，也是可以看到成功了的，一个简单的服务端渲染流程就走通了。nuxt还提供了一些其他的钩子函数，中间件等，可以参考官方api进一步学习。
3. 伪静态路由怎么设置（也可以叫做restful风格）
啥叫伪静态路由？比如刚才我们的访问地址是localhost:3000/product?id=2, 如何变成类似localhost:3000/product/2 这样也可以正常访问呢？
3.1 方案一， 使用nuxt提供的动态路由功能实现
在pages里新建products文件夹，在里面新建_id.vue(nuxt会识别带下划线的文件，作为动态路由)
修改_id.vue：将product.vue的代码复制过来，修改asyncData函数
async asyncData ({params}) {
let id = params.id
let rs = await mockApi(id)
return {
product: rs
}
}
实际就是替换query为param
然后访问 http://localhost:3000/products/2 测试一下
3.2 方案二，使用extendRoutes实现
当我们觉得方案一这种方式太傻瓜（或者说名字命名太别扭），也可以在根目录pages_extend文件夹, 新增一个product_pro.vue
将_id.vue的代码复制过来
然后在根目录新建nuxt.config.js
module.exports = {
router: {
extendRoutes (routes, resolve) {
routes.push({
name: 'product_pro',
path: '/product_pro/:id',
component: resolve(__dirname, 'pages_extend/product_pro.vue')
})
},
},
}
然后访问 http://localhost:3000/product_pro/2 测试一下
4.nuxt的客户端跨域配置 (这个部分github项目里暂无demo示例)
由于nuxt是同构代码，编写热更新代码的时候，实际上会在客户端执行asyncData，虽然服务端渲染执行的请求不存在跨域，但前端执行时存在。 所以我们需要在nuxt的nuxt.config.js里配置代理，这里以axois为例，步骤如下。
安装两个依赖
yarn add @nuxtjs/axios @nuxtjs/proxy --dev
修改nuxt.config.js
// nuxt.config.js
module.exports = {
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
axios: {
proxy: true
},
proxy: {
'/api': {
// 需要代理的接口host
target: 'https://api.mock.com',
pathRewrite: {
'^/api' : '/'
}
}
}
}
vue 文件
export default {
async asyncData ({$axios}) {
// 假设接口地址为 https://api.mock.com/get/product, 由于我们配置了代理，那么url直接/api/get/product
let res = await $axios.get('/api/get/product')
return res
}
}
这里特别注意的是axoios必须用 asyncData 的参数里取的$axios实例，否则是代理不了的。
结语
以上，是一个基础的nuxt跑通的流程，对于第一次接触nuxt的开发者来说, 目的是使得你对nuxt有一个较为直接的认识，真正项目当中，可能还涉及到cookie的处理、vuex、以及中间件的处理等。整体感觉nuxt就是一个介于接口和纯spa之间的一个中间层工具，上手还是非常简单的。
demo github地址：https://github.com/hjdshu/nuxt-demo
另附上服务器部署的教程：https://www.jianshu.com/p/b4b185370ad3
网友评论