Vue現有項目改造爲Nuxt項目

公司項目，最初只爲了實現前後端分離式開發，直接選擇了vue框架進行開發，然而現在項目基本完成了，發現蜘蛛根本就抓取不到網站數據，搜索引擎搜出來，都是一片空白沒有數據，需要對項目做SEO優化，查閱了一些資料，常見的SEO優化有兩種。

常用SEO優化方式

1. prerender-spa-plugin客戶端預渲染
2. ssr服務端渲染

本人第一次接觸SEO的優化，完全是零基礎，在選擇預渲染模式還是服務端渲染的模式時，簡單做了個demo進行了一下測試，由於公司項目以檢索爲主的產品，後期需要蜘蛛抓取的界面太龐大，最終選擇用vue提供的nuxt.js框架去改造現有的項目。

簡單寫一下prerender-spa-plugin客戶端預渲染的過程

prerender-spa-plugin客戶端預渲染

相關文檔可查看：prerender-spa-plugin

1. 安裝
   直接在vue項目中，通過npm或者yarn進行安裝

   Yarn

   $ yarn add prerender-spa-plugin

   NPM

   $ npm i prerender-spa-plugin -S

2. 配置

   在webpack.prod.js中配置

   頂部引入：

   const PrerenderSPAPlugin = require('prerender-spa-plugin')
   const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

   在plugins中配置

   new PrerenderSPAPlugin({
       //生成的預渲染html文件存放路徑
       staticDir: path.join(__dirname, '../dist'),
       //需要預渲染的界面路徑（router）
       routes: ['/', '/index'],
       //跨域轉發配置,預渲染時獲取數據的api地址
       server: {
           proxy: {
             '/api': {
               target: 'http://192.168.1.223:9002',
               changeOrigin: true,
               pathRewrite: {
                 '^/api': '/'
               }
             }
           }
        },
       //在一定時間後再捕獲頁面信息，使得頁面數據信息加載完成，必選，不然界面依然會沒有數據
       captureAfterTime: 5000,
       //忽略打包錯誤
       maxAttempts: 10,
       renderer: new Renderer({
           //可選，頁面在被搜索時的關鍵詞
           inject: {
             foo: 'bar'
           },
           //可選，無桌面系統可去掉
           headless: false,
           //必選，‘render-event'必須與main.js中mounted下的配置名稱一致
           renderAfterDocumentEvent: 'render-event'
       })
   })

   在main.js中的配置

   new Vue({
       el: '#app',
       router,
       store,
       template: '<App/>',
       mounted () {
         document.dispatchEvent(new Event('render-event'))
       }
   })

   config下index.js配置

   //build時需要將'/'切換爲'./'
   assetsPublicPath: './'

到此整個預渲染模式，改造完成了。
此次demo中尚未處理meta信息，需要配置meta信息的，可查看文檔vue-meta-info,這是一個基於vue 2.0的插件，它會讓你更好的管理你的vue頁面裏面的meta信息，詳細配置過程可參考：muwoo作者寫的“處理 Vue 單頁面 Meta SEO的另一種思路”文章，裏邊整個過程寫的挺詳細的

Nuxt.js框架改造現有Vue項目

作爲新手，並不介意自己動手去配置環境，建議直接用nuxt.js提供的腳手架(create-nuxt-app)進行快速搭建項目，具體搭建過程可查看官網文檔：Nuxt.js

nuxt.js項目搭建

確保安裝了npx（npx在NPM版本5.2.0默認安裝了)

$ npx create-nuxt-app <項目名>

或者

$ yarn create nuxt-app <項目名>

之後會有一系列的選項：

1. 在集成的服務器端框架之間進行選擇:

   • None (Nuxt默認服務器)
   • Express
   • Koa
   • Hapi
   • Feathers
   • Micro
   • Adonis (WIP)

2. 選擇您喜歡的UI框架:

   • None (無)
   • Bootstrap
   • Vuetify
   • Bulma
   • Tailwind
   • Element UI
   • Ant Design Vue
   • Buefy
3. 選擇你想要的Nuxt模式 (Universal or SPA),不懂此選項的可以看一下這篇文章render mode的區別
4. 添加 axios module 以輕鬆地將HTTP請求發送到您的應用程序中。
5. 添加 EsLint 以在保存時代碼規範和錯誤檢查您的代碼。
6. 添加 Prettier 以在保存時格式化/美化您的代碼。

官網都有詳細的講解，根據自己的需求選擇就好了，當安裝完後，項目就可以直接運行了

npm run dev

*問題

在啓動時遇到如下問題：

找了一圈，發現搭建項目時默認的element-ui版本太低，直接用npm uninstall element-ui卸載當前版本，重新使用npm install element-ui@版本號安裝即可，版本號使用2.7.2及以上均可

項目目錄簡介

既然是對現有Vue項目的改造，就先看一下nuxt.js各目錄的功能及vue項目目錄的對比吧

nuxt.js的目錄結構

├── assets                         // 資源文件。用於組織未編譯的靜態資源入LESS、SASS 或 JavaScript
│   └── logo.jpg                   // 默認logo圖片
├── components                     // 組件。用於自己編寫的Vue組件，比如滾動組件，日曆組件，分頁組件
│   └── AppLogo.vue                // 默認logo組件
├── layouts                        // 佈局。頁面都需要有一個佈局，默認爲 default。它規定了一個頁面如何佈局頁面。所有頁面都會加載在佈局頁面中的 <nuxt /> 標籤中。
│   └── default.vue                // 默認模板頁面，類似mvc中的layout
├── middleware                     // 中間件。存放中間件。可以在頁面中調用： middleware: 'middlewareName' 。
├── pages                       　 // 頁面。一個 vue 文件即爲一個頁面。
│   └── index.vue                  // 默認首頁面
├── plugins                        // 用於存放JavaScript插件的地方
│   └── element-ui.js              // 上邊我們安裝的UI框架
├── static                         // 用於存放靜態資源文件，比如圖片，此類文件不會被 Nuxt.js 調用 Webpack 進行構建編譯處理。 服務器啓動的時候，該目錄下的文件會映射至應用的根路徑 / 下。
├── store                       　 // 用於組織應用的Vuex 狀態管理。
├── .editorconfig                  // 開發工具格式配置
├── .eslintrc.js                   // ESLint的配置文件，用於檢查代碼格式
├── .gitignore                     // 配置git不上傳的文件
├── nuxt.config.js                 // 用於組織Nuxt.js應用的個性化配置，比如網站title，已便覆蓋默認配置
├── package.json                   // npm包管理配置文件
└── README.md                      // 說明文檔

nuxt.js目錄與vue.js目錄的對比

整體來看，目錄結構沒有太大的變動，區別比較大的就是router文件夾，nuxt.js項目中並沒有router路由的配置，這個就是 nuxt 框架的獨到之處，爲了能實現更好的SSR渲染，它使用的是根據頁面結構，自動路由，所以你的文件名，就是你的路由名稱，具體規則可查看官網文檔路由。

好了，nuxt項目啓動了，目錄結構也清楚了，接下來就是整個現有Vue項目的遷移了

PS：目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續更新vue項目的改造過程及分享改造過程中遇到的問題