Vue技术栈优秀SSR框架：Nuxt.js

您好，我是沧沧凉凉，是一名前端开发者，目前在掘金、知乎以及个人博客上同步发表一些学习前端时遇到的趣事和知识，欢迎关注。

在外包公司中，往往会有制作官网的需求，而官网往往会有可能有SEO的需求，而对于国内的搜索引擎来说，可能JS并不能被正确的抓取并且解析，所以我们需要预先在服务端将JS渲染成HTML，直接返回给客户的，让搜索引擎能够正确的抓取界面上的内容，让SEO变得更容易。

使用SSR有个最大的缺点：必须要通过Node服务启动项目，通过Node服务启动的项目占用的服务器资源远远高于静态包所占用的资源，可能一个SSR网站占用的资源就相当于几十个静态网站所占用的资源。

而且将JS放在服务器渲染，无疑会增大服务器的压力。

其中Nuxt在Vue的基础上，又提供了很多功能，使用Nuxt最大的好处是它提供了SSR服务，如果你自己要搭一个SSR服务，还是一件比较麻烦的事：

目录结构

下面几个是最为常用的目录，一定要熟悉它们分别是用来干什么的：

  • components：你需要使用在页面上使用的组件，都放在这下面。
  • assets：样式文件、图片、字体等推荐放在这个文件夹下面。
  • static：此文件夹下的所有文件都不会经过webpack打包，并且只会以原名称放在打包后的根目录下，一般放置robots.txt这类文件。
  • pages：页面目录，用于组织应用的路由及视图。

下面是比较少用的项目目录，但是在某些情况下也是需要使用：

  • layouts：用于组织应用的布局组件。
  • middleware：用于存放应用的中间件。
  • plugins：插件目录。
  • store：用于组织应用的 Vuex 状态树 文件。
  • content：
  • modules：

路由

在pages文件夹下的所有.vue文件都会自动生成对应的路由，所以一切不需要当作独立页面展示的组件，都不要放在pages文件夹下，推荐直接放在components中。

动态路由

跳转路由

跳转路由的方式：

在Nuxt中提供了NuxtLink组件，它跟a标签的使用很像，但是需要用to=”/xxx”替代href=”/xxx”它其实就是vue-router中RouterLink的替代品。

NuxtLink只能在你的项目中进行跳转，如果你想要跳转到其它的站点，那么你需要使用a标签。

静态资源

assets

推荐图片资源都放置在assets文件中，Nuxt.js 通过配置 Webpack 使用file-loader 和 url-loader 这两个加载器来处理此类引用。

这样做有两个好处：

  1. file-loader 能让你指定从什么地方拷贝资源文件以及发布后放到哪个目录去，并能让你使用版本哈希码来重命名发布后的文件来实现增量更新和更好的缓存策略。
  2. url-loader 能根据你指定的文件大小阈值，来判断一个文件是转换成内联的 base-64 码（如果该文件尺寸小于该阈值）还是使用file-loader来降级处理。小文件 base-64 化能有效减少 HTTP 请求数。

static

Nuxt 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下，像 robots.txt 或 sitemap.xml 这种类型的文件就很适合放到 static 目录中。

Pages

Nuxtjs提供了更多的属性让你的项目搭建尽可能变得更加的简单。

head()

Layouts

在写主页时，通常会有顶部导航栏和底部信息栏会在多个界面使用到，通过Nuxt提供的Layouts就能够很方便的实现这些效果。

自定义Layouts

如果你某些页面不需要使用到通用的一些组件，那么你可以新建一个自定义Layouts，直接在该页面中使用layout就可以切换

asyncData

asyncData是Nuxtjs中一个

其中全局的配置在nuxt.config.js中

在Nuxt中，配置Head是一个很常见的需求，所以Nuxt提供了几个钩子函数：https://www.nuxtjs.cn/api/pages-head

项目配置

几乎所有的项目配置都是在Nuxt.config.js文件中进行修改，

插件

全局CSS

Head配置

最后

Nuxt.js提供了非常多的独有的功能，但就算你不熟悉这些功能，也能