首页 / VUE / 详解Vue基于Nuxt.js实现服务端渲染

详解Vue基于Nuxt.js实现服务端渲染

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了详解Vue基于Nuxt.js实现服务端渲染，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4526字，纯文字阅读大概需要7分钟。

内容图文

直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染，本篇文章主要介绍了详解Vue基于 Nuxt.js 实现服务端渲染（SSR），具有一定的参考价值，感兴趣的小伙伴们可以参考一下

直接使用 Vue 构建前端单页面应用，页面源码时只有简单的几行 html，这并不利于网站的 SEO，这时候就需要服务端渲染

2016 年 10 月 25 日，zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js

几小时后，一个基于 Vue.js 的服务端渲染应用框架应运而生，与 Next.js 异曲同工，这就是Nuxt.js

一、快速模板

在已经安装了 vue-cli 的前提下，可以快速创建一个 nuxt 的项目模板

其中 MyProject 是项目文件夹名称，可自定义

通过 npm install （似乎用 yarn install 更顺利） 安装依赖之后，可以直接 npm run dev 在 开发环境 启动项目

默认启动的地址为 http://localhost:3000/，可以在 package.json 中添加以下配置来修改主机端口号

开发完成后执行 npm run build 打包代码，最后 npm start 启动服务

二、重要目录

生成的 项目目录 如下

详解Vue基于Nuxt.js实现服务端渲染 - 文章图片

大部分文件夹名称 都是 nuxt 默认保留的，不可修改

其中比价比较关键的目录有三个：

1. components 组件目录

详解Vue基于Nuxt.js实现服务端渲染 - 文章图片

一般用来存放 非页面级别 的组件，如 header、footer 等公共组件

该目录下的组件具有常规 vue 组件的方法和特性，不会被 nuxt.js 扩展特性

2. layouts 布局目录

详解Vue基于Nuxt.js实现服务端渲染 - 文章图片

可以修改该目录下的 default.vue 来修改默认布局

<template>
 <p>
  <my-header></my-header>
  <nuxt/>
  <my-footer></my-footer>
 </p>
</template>

其中 <nuxt/> 是必需的，页面的主体内容会显示在这里 （类似于根节点的 <router-view/>）

此外还可以在目录下新增 error.vue 作为错误页面，具体的写法可以参考官方文档

3. pages 页面目录

详解Vue基于Nuxt.js实现服务端渲染 - 文章图片

用于存放页面级别的组件，nuxt 会根据该目录下的页面结构生成路由

比如上图中的页面结构，会生成这样的路由配置：

此外，该目录下的 vue 组件还具备一些 Nuxt.js 提供的特殊功能特性

其中 asyncData 方法比较常用，支持异步数据处理

这个方法会在 页面组件 每次加载之前被调用，然后获取数据并返回给当前组件

asyncData 方法的第一个参数为上下文对象 context，具体属性可以 查看这里

由于asyncData方法是在组件初始化前被调用的，所以在方法内是没有办法通过 this 来引用组件的实例对象

三、使用插件

如果项目中还需要引入其他的第三方插件，可以直接在页面中引入，这样在打包的时候，会将插件打包到页面对应的 js 里面

但要是别的页面也引入了同样的插件，就会重复打包。如果没有需要分页打包的需求，这时候可以配置 plugins

以 element-ui 为例，在安装了 element-ui 之后，在 plugins 目录下创建 elementUI.js

详解Vue基于Nuxt.js实现服务端渲染 - 文章图片

然后在根目录的 nuxt.config.js 中添加配置项 build.vendor 和 plugins

 build: {
  vendor: ['~/plugins/elementUI.js']
 },
 plugins: [
  {src: '~/plugins/elementUI.js'},
 ]

这里的 plugins 属性用来配置 vue.js 插件，也就是 可以用 Vue.user() 方法 的插件

默认只需要 src 属性，另外还可以配置 ssr: false，让该文件只在客户端被打包引入

如果是像 axios 这种第三方 （不能 use） 插件，只需要在 plugins 目录下创建 axios.js

然后在 build.vendor 中添加配置 （不需要配置 plugins）

这样在打包的时候，就会把 axios 打包到 vendor.js 中

四、Vuex 状态树

如果在 store 目录下创建了 index.js，nuxt.js 会根据该目录下的文件创建 Vuex 状态树

Nuxt.js 内置引用了 vuex 模块，不需要额外安装

上面的代码中，我在 actions 中写了一个 loadAboutMeInfo() 方法，用来请求 /api/about 接口

然后在 about.vue 页面中调用

成果演示：

详解Vue基于Nuxt.js实现服务端渲染 - 文章图片

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

ajax请求之返回数据的顺序问题分析

Ajax异步提交数据返回值的换行问题实例分析

防止重复发送Ajax请求的解决方案


以上就是详解Vue基于 Nuxt.js 实现服务端渲染的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的详解Vue基于Nuxt.js实现服务端渲染全部内容，希望文章能够帮你解决详解Vue基于Nuxt.js实现服务端渲染所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/289276.html

来源：【匿名】