【nuxt服务端渲染技术篇】Vuejs快速重构为Nuxtjs

Vuejs 是易于上手的前端主流框架之一，虽然其SPA的特性导致在面对seo需求的网站开发时不太友好，但是vuejs提供了相应的解决方案，Prerender预渲染 和SSR服务端渲染技术。前者可以在项目打包时将配置好的路由页面生成为静态页面，利于搜索引擎爬虫，但是依然有部分需求场景无法满足，例如详情页跳转，而后者是基于vuejs开发的SSR框架，可以解决基本的SEO需求，本文也将演示如何将你的vue2项目迁移至nuxt2，为项目做SEO优化。

目录结构

java 复制代码

├── public
├── src
   ├── assets
   ├── components
   ├── router
   ├── views
   ├── App.vue
   └── main.js
├── static
└── package.json

lua 复制代码

├──.nuxt
├── build
├── components
├── pages
   ├── index.vue
├── store
├── nuxt.config.js
└── package.json

也许你跟我一样，刚创建好nuxt项目看到这个目录结构的时候一头雾水，看起来只有一小部分文件夹同名可以直接迁移，但是其实其他页面和文件夹的迁移也非常简单！

nuxt自动路由生成

页面文件

nuxt自动为页面文件配置路由首先是对vue中的页面文件进行迁移，直接将src/views的页面文件拷贝到pages内，假设迁移的页面是src/views/news.vue，打开.nuxt/router.js查看

vbnet 复制代码

routes: [{
path: "/news",
component: _545c3eea,
name: "news"
},
path: "/",
component: _687fd67e,
name: "index"
}],

nuxt不再需要像vue一样为每个路由页面进行路由配置，所以我们将每个页面完整的拷贝过来就可以了。

App.vue

nuxt模板文件开发vue时，经常会在App.vue中写

xml 复制代码

<template>
	<Header></Header>
	<router-view/>
</template>

让一个导航栏固定在页面顶部，剩下的部分来显示路由页面，但是可以发现在nuxt目录中找不到App.vue 了，其实只是换了种方式存在，我们在nuxt根目录直接创建/layouts/default.vue default.vue

xml 复制代码

<template>
<div id="app">
<Header></Header>
<Nuxt />
</div>
</template>

可以看到default.vue 代替了App.vue 展示相同的页面模板效果而在nuxt中，<router-view/>取而代之的是<Nuxt /> 同样情况的还有<router-link>路由链接变成了<nuxt-link>，它们的功能基本一致，语法上有所区别需要进行修改。

依赖

Axios

项目开发时，向接口发送请求经常使用的axios 在迁移到nuxt时也有需要注意的点，由于nuxt中没有main.js文件

kotlin 复制代码

npm install axios@版本号

除了基本的安装命令之外，我们现在还需要在nuxt.config.js中找到build:{ }，为axios做如下配置

css 复制代码

build:{
	transpile:["axios"]
}

插件

Swiper

以swiper翻页插件为例，在vue中可以通过main.js全局引入swiper插件并在页面内进行使用，在nuxt中同样需要在nuxt.config.js中找到plugins:{ }，为swiper做如下配置

css 复制代码

plugins: [
	{ src: '@/plugins/swiper'}
],

状态管理

Vuex

在nuxt项目根目录新建store/index.js即可实现vuex状态管理，与vue用法基本一致，其中有一个基本的不同点需要修改 state

javascript 复制代码

export const state=()=>({
	testValue:'hello'
})

state语法需要修改同如上才可被正确使用。

生命周期

asyncData( )

nuxt的生命周期与vue相同的有created ，mounted 等，它也有独立的服务端生命周期，这里着重讲只在页面组件内可以使用 的 asyncData( { query , params } ) 在vue中，向接口发送请求得到数据一般通过如下方式

kotlin 复制代码

api.get('/selectNameById?id='+this.queryId)
.then(res => {
this.username = res.data;
})
.catch(error => {
console.error('Error：', error);
});

SSR服务端渲染技术是将数据请求在服务端渲染时已经完成并返回到客户端进行渲染，最后展示给用户，所以在页面组件源代码也可以看到渲染好的数据，根据这个原理我们分析得知，数据请求一定不是在页面组件内完成的，因为他属于客户端的部分，所以服务端生命周期asyncData出现了。
asyncData( { query , params } ）会在页面渲染之前被执行，利用它提前向接口发送请求，将数据传进data()内，以完成在页面上的数据渲染。
通过query和params在传参时可以选择隐式或者显式，我们可以在asyncData中将vue中原本的api.get方法改为nuxt的方式

javascript 复制代码

async asyncData({query}){
	let queryId=query.queryId
	let res=await api.get('/selectNameById?id='+queryId)
	let username=res.data
return {
	username:username
	}
}

注意！包括asyncData在内的服务端生命周期均应写在export default { } 内，与客户端生命周期同级，而不是写在方法内

小结

关于项目重构

对于特别需要seo需求的项目，最好在立项之初就明确需求再进行开发，后期确有seo需求的，在进行nuxt重构时一定要做好备份工作。
nuxtjs确实在seo优化方面表现良好，但是由于其特性，在服务端请求数据并渲染，对于服务器的配置有一定要求，服务器配置不符合要求会使得用户的页面浏览体验变差，
本文所演示的代码与教程并不全面，需要结合自身项目调整，nuxtjs还有诸多特性和基础没有在文中提到，欢迎共同交流探讨，在往后的时间里多多学习，一起进步 (:

前端笔记 @Qm 2024/4/18 22:00 Guilin,Guangxi