Vue Nuxt框架 静态化部署[spa、generate] 之 Cannot read property ‘headers’ of undefined、headr外加载css

项目环境：

Nuxt 1.4.5

webPack 3.12.0

 

初期开发部署情况 使用的是 bulid 默认的打包模式 Universal  此方式的优点在于动态化部署，并且有益于SEO. 但是由于后端服务器需要节省开资，希望使用静态化部署，所以开始了以下的方式。

静态化部署有2种方式

    1：npm run generate

    2:  num run build (PS: nuxt.config.js 的 config中 需要配置 mode:'spa' )

部署经过：   

 执行 npm run generate

问题 1 ：报错   Cannot read property ‘headers’ of undefined

查找   ： 发现项目中 1个持久化方案 和 1个兼容性问题中使用了 req.headers

原因   ： 静态化部署的情况下 nuxt不支持 res和req返回 

解决方案： 将req移除.  我的持久化方案 修改成了localStore 兼容性使用 navigator.userAgent 获取浏览器版本

 

问题 2 ：生成成功后 生成的dist文件夹中 首页index中的 样式表 加载出错, headr外加载了一部分css 导致首页访问直接出现 css代码

查找    ：尝试了很多办法都不成功： 修改样式表中的中文、减少样式表加载、加载vue文件的name修改、加载vue文件中的最外层div不使用class

原因   ： 推测是版本内部问题，如果有清楚的朋友 请留言 3Q

解决方案： 查找到一个解决方案 使用PurgeCSS进行有效css加载， 但是个人尝试安装时发现 需要webPack4 所以 就需要升级nuxt.2 所以暂时搁置了此方案  

 

由于样式代码问题 所以改用 num run build (PS: nuxt.config.js 的 config中 需要配置 mode:'spa' ) 方案进行静态部署

  执行 num run build

问题 ：路由无法作为首页访问

原因 ：发现在之前使用 npm run generate 时 nuxt.config.js -> config-> generate 的配置中 设置了subFolders: false 相对生成的页面内 没有生成index.html 而是生成了 .html文件

解决方案：不是最佳解决方案 删除 subFolders: false 配置后 生成了 单入口的静态部署 可以进行其他路由访问 但是相对的SEO结果相对不够友好（如果有清楚的朋友 请留言 3Q * 3）

 

至此 静态化部署满足当前项目使用，更优的解决方案 求各位联系探讨 （ 请留言 3Q * 999）