Vue項目SEO優化

SEO 優化：搜索引擎優化

讓搜索引擎更好的 定位到相應數據
SEO 基本條件： 1. 多頁面--->蜘蛛抓取（爬蟲） 2.頁面要有蜘蛛抓取的內容 3.頁面要有 title，描述，關鍵詞
vue 項目本身不具備這些條件
1.Vue 項目本身是單頁面應用 SPA（single page web application）。不具備多頁面的條件
2.Vue 打包后的項目只有一個 index.html 頁面，且里面不包含實際內容，實際頁面內容通過.js 文件導入。不具備頁面有蜘蛛抓取內容的條件 3.頁面沒有 title,keywords,描述
為了能更好的被搜索引擎搜索到，需要進行 SEO 優化

解決方案一：預渲染

1. 安裝預渲染插件 prerander-spa-plugin

npm i prerander-spa-plugin

2. vue.config.js 配置預渲染

configureWebpack:{
    plugins:[
        new PreranderSPAPlugin({
            staticDir:path.join(__dirname,'dist')
            routes:[ // 需要打包幾個頁面就配置幾個路由
                '/',
                '/about',
                '/home',
            ]
        })
    ]
}

3. 在要打包的頁面中配置 metaInfo

export default{
    metaInfo:{
        title:'guoyanchao',// 設置頁面title
        meta:[{
            name:'關鍵字1，關鍵字2'，
            content:'描述......'
        }]
    }
}

缺點： 1. 如果有很多詳情頁面需要 SEO,則需要為很多頁面配置預渲染路由和 metaInfo。此時不適合使用預渲染進行 SEO 優化 2. 動態改變 title,描述，關鍵詞 是無效的，只能在頁面中寫死
適合的場景：
對項目中的某幾個頁面進行 SEO 優化，可以使用預渲染

解決方案二：服務端渲染 Nuxt(終極解決方案)

使用場景： 1.有很多頁面需要 SEO 優化 2.需要動態改變 title,描述，關鍵詞

Nuxt.js 服務端渲染特點：

1.不需要路由，新增頁面只需要在pages下新建.vue文件就可以在頁面訪問
2.組件不需要引入就可以使用，新增組件只需要在components下新建.vue文件就可以在頁面中使用組件了
3.每個頁面文件中配置title，關鍵字，描述。並且提前拿到請求的數據再渲染頁面

Nuxt.js 項目上線流程

1. npm run build 會生成.nuxt 文件
2. 將項目目錄中的
   static
   .nuxt
   package.json
   nuxt.config.js
   這四個文件放到服務器上
3. 服務器安裝 node
4. 再服務器上 npm install 安裝依賴包
5. 再服務器上 npm run start 啟動項目
6. nginx 代理域名

總結：vue 適合做后台管理系統，H5 頁面
vue 不適合做 PC 前台（因為大部分 PC 前台都需要做 SEO，而 vue 在 SEO 方面有先天缺陷）