vue 服务器渲染初体验

以前发过一篇利用vue、express和mongodb搭建我的网站的文章 github.com/yunlzhang/l…  网站地址：lcddjm.com没有使用ssr(服务器渲染)，用户体验很差，不利于seo

因而我将以前的代码整理了一下，结合nuxt.js重写了一份ssr的代码  网站地址：ssr.lcddjm.com

代码重构过程当中,作了如下一些调整：

• 将以前一些耦合比较高的代码抽离出来，封装成独立的组件，放在components目录下
• 原来使用locastorage来管理登陆信息，现使用vuex来管理
• 接口单独部署，采用cors方式解决跨域问题

Nuxt.js 是一个基于 Vue.js 的通用应用框架,它预设了利用Vue.js开发 服务端渲染的应用所须要的各类配置

使用Nuxt，你不须要再去写路由逻辑，Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

例如个人page目录结构：

它会自动生成路由配置：

router: {
  routes: [
    {
      name: 'index',
      path: '/',
      component: 'pages/index.vue'
    },
    {
      name: 'license',
      path: '/license',
      component: 'pages/license.vue'
    },
    {
      name: 'signin',
      path: '/signin',
      component: 'pages/singin.vue'
    },{
      name: 'signup',    
      path: '/signup', 
      component: 'pages/singup.vue'
    },{      
        name: 'artilce', 
        path: '/article/:id', 
        component: 'pages/article/_id.vue'
    },
     ......
  ]
}
复制代码

具体参考：zh.nuxtjs.org/guide/routi…

nuxt内置了webpack打包工具，若想要修改配置，须要在nuxt.config.js中进行具体的修改

参考：https://zh.nuxtjs.org/guide/configuration

本项目代码仓库：github.com/yunlzhang/l…

不足之处请你们多多指教。

ps:在打包发布的过程当中，我发现一个问题，打包后的vendor文件特别大，element-ui我是经过按需引用方式加载，但仍然在vendor中占很大部分。如何去拆分vendor文件，请你们给一点建议