前提

想想这个项目我就头疼，因为但是在开会的时候说的很简单，预计也就一个月就可以做好了，结果就设计稿都花了一个多月才确定下来，然后就是加班加点做好，因为有几个界面是需要做 SEO ，所以就使用预渲染 ( prerender-spa-plugin 和 vue-meta-info）来做 SEO，然后就开开心心的测试上线了。

隔天上班

产品说：

• 在后台修改 SEO后 为什么在检查源代码的时候还是之前的 SEO？

• 而且其他界面为什么没有 SEO？

• 不能动态的吗？

• （我真是 栓Q 了）

于是乎，就带着这些疑问在我的脑海里找对应的解决方案（脑海里找对应的解决方案 === 想中午吃啥，vue官网+百度找解决方案）。首先，vue官网是有SSR介绍和说明的 （传送门：服务端渲染（SSR））
在图一可以看到，我们可以使用 createSSRApp（）。但是在图二

可以发现有几种解决方案

• Vite SSR： 由于项目是使用 Vue-cli 创建的，所以就不考虑了

• Quasar： 可以看到它提供了很多功能，它可以让你用同一套代码库构建不同目标的应用，关键是它还提供了一整套 Material Design 风格的组件库，但我们就简单弄个 SEO，用它就不划算了

• Nuxt： 从图片中可以看到圈起来的那一部分，没错，vue官方推荐使用的，又由于前端几种方案都不考虑，总不能都不考虑吧

• 它们之间的区别可自行去了解一下

既然已经有现成的方案了，那咱们就去看看嘛~

• 因为我是那个有现成的就不自己写，当然了，像这种级别框架的不是我现在这种级别能写的

• 比如项目中有几个界面是需要全屏滚动的，然后我就使用了 Swiper 来做，结果在测试的时候，移动端和电脑触摸板滚动的时，有时候出现划一下滚好几屏的情况，我这暴脾气能忍它？直接卸载自己封装一个，完美解决！！！

目录结构

• nuxt文件夹： (nuxt.js build output)nuxt自动生成的，临时的用于编辑的文件。

• assets文件夹：存放未编译的静态资源譬如less,sass或javascript。

• components： 放置vue组件,这些组件不会像页面组件那样有asyncData方法的特性。

• layouts： 组织应用的布局组件。

• middleware： 放置应用所需的中间件（中间件允许定义一个自定义函数运行在一个页面或一组页面渲染之前）。

• pages： 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

• plugins： 组织那些需要在 vue.js 应用 实例化之前需要运行的 Javascript 插件。

• static： 存放应用的静态资源文件， 该目录下的文件不会被webpack编译处理。

• store： 管理vuex状态。

• .env： （这个文件不是必须的）设置环境变量的参数，可以通过process.env.参数名进行获取。

• .gitignore： 设置不需要提交到git上面的文件。

• nuxt.config.js： 用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

• package.json： npm包管理的配置文件。

• pageage.lock.json： 指定npm包的具体版本，以达到统一。

nuxt的路由:

• 路由管理： 可以使用或

• 路由组件： nuxt 推荐使用 其参数和 一致

nuxt路由生成规则

Nuxt.js 依据 pages 目录结构在_nuxt隐藏文件夹中自动生成 vue-router 模块的路由配置。

完整版

可查看本人公众号：使用 Nuxt 重构 Vue-cli 项目，我悟了

如果觉得可以就关注一下公众号吧~