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檔案，請大家給一點建議

vue 伺服器渲染初體驗

相關文章