nuxt重构vue项目

背景：

公司要求用nuxt重构vue项目，目的是为了服务端渲染ssr，提高加载速度，nuxt还可以实现seo优化，但是由于是后台管理项目，所以没用到这个功能。

改造的时候确实遇到很多坑，想过不用这个框架，自己配置ssr，由于自己配置ssr更复杂，所以硬着头皮改完了，现在总结一下遇到的问题，一来做完项目总结会有提升，二来可以方便他人，毕竟我自己也是看了别人的博客才得到灵感。

得到的经验：

1.按着某一篇高赞的文章去确定修改的流程，遇到问题先自己想想原因，不要一报错就复制报错信息然后去百度或者谷歌，先自己分析一下问题，大胆猜测问题的原因然后去搜索的时候针对性会更强。

2.学会利用官方文档，官方文档的权威性毕竟比一般博客强，可以在报错的时候去看看

3.理解一些原理，改bug有时候照着别人的教程改完以后一头雾水，不知道怎么错了，然后又怎么对了，最好能去理解错误的原理。

4.第一天改了很久没搞定的bug可以放到第二天早上效率高的时候一下子就改完了。

遇到的问题：

1.报错：Cannot read property 'toLowerCase' of undefined

根据排查我发现只要用到elementUI的组件form就会有问题，其他的组件正常，猜测可能是el-form组件内部用到toLowerCase.一下子不知道怎么解决，google搜索没解决一番没解决，最后猜测是client端dom渲染和server端dom渲染不匹配，server端并没有生成相应的dom结构，导致undefined，于是去搜索怎么能让vue页面只在client渲染，找到一个答案

这个文章之前看过，但不是针对Cannot read property 'toLowerCase' of undefined这个问题的，就没想到这样做，这也算是个交叉问题吧。

2.原来vue项目路由结构不想改动，或者改动麻烦，而nuxt是文件名作为路由，这个操作人性化的过分了，重构项目却带来了麻烦

解决：使用一些模块，官方文档也明确说了，可以使用模块来扩展核心功能

在npm官方网站有nuxt自定义路由的模块

3.store配置要改动

读官方文档有点费劲，多看看应该能搞定

4.plugins插件使用的时候要在nuxt.config.js里声明，有些插件原来能用，现在改为nuxt项目会报很多undefind错，是因为服务端渲染的时候server是node环境，而client端是浏览器环境，就会有document is not defined等错误，按照官方文档的添加if（process.client）{}只在客户端执行。

5.原来的main.js不起作用了。

6.报错：resolve is not defined，这是在使用svg的时候，在nuxt.config.js配置里发生的，目的是通过配置实现文件名来引用svg图标。

目录结构：

（改前）

（改后）