感悟经过周六日的多次尝试，终于解决了服务端渲染中的常见问题。当SEO不再是问题的时候，也许我们在做前端真正的春天的时候，也遇到了一些小坑。Nuxt.js官方还是很给力的。提出问题后，我非常积极地提供帮助。再次感谢Nuxt.js开发团队。项目地址演示地址路由认证第一个障碍是登录时的认证问题，如何在本地保存token。官方使用express-session解决了这个问题，但是后台也需要用到nodejs，而我们公司用的是PHP。想了想，我可能会尝试cookies，所以我这样做了：app.post('/api/login',function(req,res){//后台验证用户信息并返回tokenasyncfunctionlogin(){const{data}=awaitaxiosServer.post('/login',req.body)returndata}login().then(function(data){//在cookie中存储令牌const{token}=dataif(token){res.cookie('token',token,{maxAge:60000*60*24})}//原封不动返回returnres.json(data)})})我用nodejs转发了登录请求，用户提交的数据传递给后端，将后端返回的token设置到cookie中，然后将数据返回给前端，前端使用vuex保存token状态，这样token就存在于cookie和内存中同时，刷新页面也是普通的前端存储令牌：asyncnuxtServerInit({dispatch,commit},{req,res}){if(req.cookies&&req.cookies.token){//存储令牌commit('SET_USER',req.cookies.token)}},//SET_USERSET_USER(state,token){state.token=token},所以这个问题就这样解决了，需要的数据全部存储在本地可以通过这种方式来解决渲染组件中的数据另一个小问题就是组件中的数据是如何渲染的。在Nuxt.js中，只有页面中的组件有fetch和asyncData方法，所以当我们使用layout布局页面时，如果组件需要请求数据，是无法渲染的。解决方法是在nuxtServerInit方法中初始化组件中的数据，如下：asyncnuxtServerInit({dispatch,commit},{req,res}){//初始化组件中的数据awaitdispatch('ADMIN_INFO')awaitdispatch('TAGS')awaitdispatch('ARCHIVES')}这个组件中的数据也可以渲染成功。个人感觉使用滤镜的Nuxt.jsplugins设计还是很人性化的，使用起来简直不能更简单。在plugins中新建一个filters.js，过滤器可以这样玩：importVuefrom'vue'//timeformatexportfunctionformatDate(date,fmt){letnewDate=newDate(date)if(/(y+)/.test(fmt)){fmt=fmt.replace(RegExp.$1,(newDate.getFullYear()+'').substr(4-RegExp.$1.length))}leto={'M+':newDate.getMonth()+1,'d+':newDate.getDate(),'h+':newDate.getHours(),'m+':newDate.getMinutes(),'s+':newDate.getSeconds()}for(letk在o){if(newRegExp(`(${k})`).test(fmt)){letstr=o[k]+''fmt=fmt.replace(RegExp.$1,(RegExp.$1.length===1)?str:padLeftZero(str))}}returnfmt}letfilters={formatDate}Object.keys(filters).forEach(key=>{Vue.filter(key,filters[key])})导出默认过滤器，然后在nuxt.config.js中注册：plugins:['~plugins/filters.js']可以在这样的组件中愉快地使用：{{日期|formatDate('yyyy-MM-dd')}}
