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文件，請你們給一點建議