vue框架如何将SPA项目改为SSR项目

相信使用vue spa模式开发页面的都知道，使用spa模式的项目首页加载很慢，就算你再怎么切割chunks，首页加载时总会有几秒钟的白屏，非常影响体验，而且spa项目很难进行seo。

如果你也遇到了上面这些问题，那么可以尝试将spa项目改为ssr项目，更好地seo、更快地首屏加载恰好就是ssr相对于传统的spa项目的优点。

接下来实际操作如何将spa项目改为ssr项目，照着vue官网的ssr文档看估计你是一脸懵逼，无从下手，但是vue已经有了官方的ssr框架nuxt，所以我们直接使用nuxt搭建框架，然后将spa的代码拷贝过去，重新配置文件，这样就达到了我们的目的。一边对照文档一边对照教程使用nuxt吧

1. 创建nuxt项目

安装完成之后对比下spa项目的目录结构与ssr项目的目录结构

spa项目的目录结构

src目录里面的内容，这些大家应该很熟悉

nuxt生成的项目的目录

下面就是nuxt项目客户端入口文件，可以看到没有index.html文件也没有App.vue了

2. 设置路由

在我们的spa项目中，我们都是使用的vue-router，需要我们自己手动引入，但是nuxt项目中已经帮我们引入了，我们可以直接使用vue-router，不过需要按照nuxt的规则来使用路由 。
其实也很简单，只要记住以下几点就可以了：
1、页面全部放在pages文件夹下面；
2、文件名称就是路由名称；
3、文件嵌套关系就是路由嵌套关系

大家可以对照着看nuxt自动生成的路由与pages下的文件的对应关系

页面级的组件全部就放在pages目录里面，页面中引用的一些组件，比如说公用的header和footer，就放在components目录下面。

另外，如果你是用的nuxt版本是"nuxt": "^2.13.3"，你的nuxt.config.js里面会设置components: true,这就意味着你的项目中的components里面的组件不用手动import了，都可以直接使用。如：

3、引入插件

在项目中我们需要的插件就在plugins里面引入。
比如说我们要引入element-ui

这里引入之后还没有真正地起作用，要在nuxt.config.js中引入了才可以真正使用。
如图，在plugins里面引入我们的插件就可以了。
@就是根目录的别名，这个根目录你也可以在nuxt.config.js里面设置，当然这是你把项目跑起来了之后进一步了解需要做的事情了，现在我们就是让你快速把spa项目转换成ssr项目并运行起来。

4、使用中间件

在spa项目中我们会使用路由的beforeEach来做一些拦截操作，但是在nuxt项目中，路由都是自动生成的，那么如何来复现spa项目中的路由拦截操作呢？
我们在middleware目录下面创建router.js

这里的redirect就是路由重定向，想了解这些参数的更多信息可以自己打印出来查看。
同plugins插件一样，单单创建了中间件文件还不能直接生效，还需要在nuxt.config.js中引入

引入文件之后就可以使用路由中间件了

5、使用axios

在vue项目中进行http请求首选的包肯定是axios，在nuxt项目创建的时候我们已经选择过了，所以不需要再次引入，只需要在nuxt.config.js中进行如下设置，当然设置按照你自己的时机情况来，跨域代理也按照实际情况来就行了，很简单

使用的时候就可以在页面中直接this.$axios来进行http请求了，如果要配置拦截器，参考上面的链接

6、引入公共css文件

在spa项目中我们可以在vue.config.js文件中引入公共的css文件，如图：

那么在nuxt项目中我们就在nuxt.config.js文件中引入公共文件

7、使用vuex进行状态管理

如图，与spa的store写法稍有区别，不过基本还是一样的，这样就可以使用vuex来进行状态管理了

配置好以上内容之后，当然你的页面里面的别名、文件路径引用全部都要改过来，然后就可以尝试

npm run build 
然后
npm run dev

启动项目了