详解Vue基于Nuxt.js实现服务端渲染（SSR）_nuxt是怎么实现服务端渲染的资源-CSDN文库

28 浏览量 2020-10-18 15:11:06 上传评论 1 收藏 75KB PDF 举报

资源推荐

资源详情

资源评论

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

直接使用 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 的项目模板

vue init nuxt-community/starter-template MyProject

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

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

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

"config": {

"nuxt": {

"host": "0.0.0.0",

"port": "7788"

}

},

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

二、重要目录二、重要目录

生成的项目目录如下

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

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

1. components 组件目录组件目录

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

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

2. layouts 布局目录布局目录

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

<template>

<div>

<my-header></my-header>

<nuxt/>

<my-footer></my-footer>

</div>

</template>

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

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

3. pages 页面目录页面目录

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

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

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

内容反馈

weixin_38629042

粉丝: 7
资源: 927

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip