摘要：好了，項(xiàng)目啟動(dòng)了，目錄結(jié)構(gòu)也清楚了，接下來(lái)就是整個(gè)現(xiàn)有項(xiàng)目的遷移了目前正在改造項(xiàng)目，文章尚未寫(xiě)完，會(huì)抽時(shí)間不定期的繼續(xù)更新項(xiàng)目的改造過(guò)程及分享改造過(guò)程中遇到的問(wèn)題

公司項(xiàng)目，最初只為了實(shí)現(xiàn)前后端分離式開(kāi)發(fā)，直接選擇了vue框架進(jìn)行開(kāi)發(fā)，然而現(xiàn)在項(xiàng)目基本完成了，發(fā)現(xiàn)蜘蛛根本就抓取不到網(wǎng)站數(shù)據(jù)，搜索引擎搜出來(lái)，都是一片空白沒(méi)有數(shù)據(jù)，需要對(duì)項(xiàng)目做SEO優(yōu)化。

本人第一次接觸SEO的優(yōu)化，完全是零基礎(chǔ)，開(kāi)啟了小白菜的SEO探索之旅，記錄一下一路的過(guò)程，方便自己回顧與大家的探討，如有不度之處，還請(qǐng)路過(guò)的大神指導(dǎo)一下。

在查閱了一些資料后，常見(jiàn)的SEO優(yōu)化有以下兩種：

prerender-spa-plugin客戶端預(yù)渲染

ssr服務(wù)端渲染

在選擇預(yù)渲染模式還是服務(wù)端渲染的模式時(shí)，簡(jiǎn)單做了個(gè)demo進(jìn)行了一下測(cè)試，由于公司項(xiàng)目以檢索為主的產(chǎn)品，后期需要蜘蛛抓取的界面太龐大，最終選擇用vue提供的nuxt.js框架去改造現(xiàn)有的項(xiàng)目。

簡(jiǎn)單寫(xiě)一下prerender-spa-plugin客戶端預(yù)渲染的過(guò)程

相關(guān)文檔可查看：prerender-spa-plugin

直接在vue項(xiàng)目中，通過(guò)npm或者yarn進(jìn)行安裝
##### Yarn
$ yarn add prerender-spa-plugin
##### NPM
$ npm i prerender-spa-plugin -S

在webpack.prod.js中配置

頂部引入：

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

在plugins中配置

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

在main.js中的配置

new Vue({
    el: "#app",
    router,
    store,
    template: "",
    mounted () {
      document.dispatchEvent(new Event("render-event"))
    }
})

config下index.js配置

// build時(shí)需要將"/"切換為"./"
assetsPublicPath: "./"

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

作為新手，并不介意自己動(dòng)手去配置環(huán)境，建議直接用nuxt.js提供的腳手架(create-nuxt-app)進(jìn)行快速搭建項(xiàng)目，具體搭建過(guò)程可查看官網(wǎng)文檔：Nuxt.js

確保安裝了npx（npx在NPM版本5.2.0默認(rèn)安裝了)

$ npx create-nuxt-app <項(xiàng)目名>

或者

$ yarn create nuxt-app <項(xiàng)目名>

之后會(huì)有一系列的選項(xiàng)：

在集成的服務(wù)器端框架之間進(jìn)行選擇:

None (Nuxt默認(rèn)服務(wù)器)

Express

Koa

Hapi

Feathers

Micro

Adonis (WIP)

選擇您喜歡的UI框架:

None (無(wú))

Bootstrap

Vuetify

Bulma

Tailwind

Element UI

Ant Design Vue

Buefy

選擇你想要的Nuxt模式 (Universal or SPA),不懂此選項(xiàng)的可以看一下這篇文章render mode的區(qū)別

添加 axios module 以輕松地將HTTP請(qǐng)求發(fā)送到您的應(yīng)用程序中。

添加 EsLint 以在保存時(shí)代碼規(guī)范和錯(cuò)誤檢查您的代碼。

添加 Prettier 以在保存時(shí)格式化/美化您的代碼。

官網(wǎng)都有詳細(xì)的講解，根據(jù)自己的需求選擇就好了，當(dāng)安裝完后，項(xiàng)目就可以直接運(yùn)行了

npm run dev

在啟動(dòng)時(shí)遇到如下問(wèn)題：

找了一圈，發(fā)現(xiàn)搭建項(xiàng)目時(shí)默認(rèn)的element-ui版本太低，直接用npm uninstall element-ui卸載當(dāng)前版本，重新使用npm install element-ui@版本號(hào)安裝即可，版本號(hào)使用2.7.2及以上均可

既然是對(duì)現(xiàn)有Vue項(xiàng)目的改造，就先看一下nuxt.js各目錄的功能及vue項(xiàng)目目錄的對(duì)比吧

├── assets                         // 資源文件。用于組織未編譯的靜態(tài)資源入LESS、SASS 或 JavaScript
│   └── logo.jpg                   // 默認(rèn)logo圖片
├── components                     // 組件。用于自己編寫(xiě)的Vue組件，比如滾動(dòng)組件，日歷組件，分頁(yè)組件
│   └── AppLogo.vue                // 默認(rèn)logo組件
├── layouts                        // 布局。頁(yè)面都需要有一個(gè)布局，默認(rèn)為 default。它規(guī)定了一個(gè)頁(yè)面如何布局頁(yè)面。所有頁(yè)面都會(huì)加載在布局頁(yè)面中的  標(biāo)簽中。
│   └── default.vue                // 默認(rèn)模板頁(yè)面，類似mvc中的layout
├── middleware                     // 中間件。存放中間件?？梢栽陧?yè)面中調(diào)用： middleware: "middlewareName" 。
├── pages                       　 // 頁(yè)面。一個(gè) vue 文件即為一個(gè)頁(yè)面。
│   └── index.vue                  // 默認(rèn)首頁(yè)面
├── plugins                        // 用于存放JavaScript插件的地方
│   └── element-ui.js              // 上邊我們安裝的UI框架
├── static                         // 用于存放靜態(tài)資源文件，比如圖片，此類文件不會(huì)被 Nuxt.js 調(diào)用 Webpack 進(jìn)行構(gòu)建編譯處理。 服務(wù)器啟動(dòng)的時(shí)候，該目錄下的文件會(huì)映射至應(yīng)用的根路徑 / 下。
├── store                       　 // 用于組織應(yīng)用的Vuex 狀態(tài)管理。
├── .editorconfig                  // 開(kāi)發(fā)工具格式配置
├── .eslintrc.js                   // ESLint的配置文件，用于檢查代碼格式
├── .gitignore                     // 配置git不上傳的文件
├── nuxt.config.js                 // 用于組織Nuxt.js應(yīng)用的個(gè)性化配置，比如網(wǎng)站title，已便覆蓋默認(rèn)配置
├── package.json                   // npm包管理配置文件
└── README.md                      // 說(shuō)明文檔

整體來(lái)看，目錄結(jié)構(gòu)沒(méi)有太大的變動(dòng)，區(qū)別比較大的就是router文件夾，nuxt.js項(xiàng)目中并沒(méi)有router路由的配置，這個(gè)就是 nuxt 框架的獨(dú)到之處，為了能實(shí)現(xiàn)更好的SSR渲染，它使用的是根據(jù)頁(yè)面結(jié)構(gòu)，自動(dòng)路由，所以你的文件名，就是你的路由名稱，具體規(guī)則可查看官網(wǎng)文檔路由。

好了，nuxt項(xiàng)目啟動(dòng)了，目錄結(jié)構(gòu)也清楚了，接下來(lái)就是整個(gè)現(xiàn)有Vue項(xiàng)目的遷移了

PS：目前正在改造項(xiàng)目，文章尚未寫(xiě)完，會(huì)抽時(shí)間不定期的繼續(xù)更新vue項(xiàng)目的改造過(guò)程及分享改造過(guò)程中遇到的問(wèn)題