關於vue單頁面作seo，採用預渲染的方案實施

因爲開發的官網頁面項目急，且規劃不清楚，當時先採用了vue進行開發，如今須要作SEO優化，因此要麼SSR要麼預渲染，SSR看了一下，太麻煩了。。果斷放棄，轉向作預渲染，官方有介紹，傳送門：https://ssr.vuejs.org/zh/

當時看了一下文檔（主要是以爲SSR太麻煩，且不會弄）

果斷採用prerender-spa-plugin的方式來試試看效果。

因爲度娘出來的千篇一概，致使複製的收某個命名錯誤，查了2個小時的錯，結果是大小寫問題。。。。我他媽。。。。

這裏給出完整的，詳細的，方法（這裏我用的是vue-cli3！）

1、引入prerender-spa-plugin

npm install prerender-spa-plugin --save

2、設置vue.config.js

若是沒有，這個文件，就本身建立一個，和package.json同級

一、配置vue.config.js

let path = require('path');
var PrerenderSPAPlugin = require('prerender-spa-plugin')
var Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
    chainWebpack: config => {
        //設置別名
        config.resolve.alias
            .set('@', resolve('src'));
        config.optimization.minimize(true);
        config.optimization.splitChunks({
            chunks: 'all'
        })
    },
    configureWebpack: () => {
        return {
            plugins: [
                new PrerenderSPAPlugin({
                        staticDir: path.join(__dirname, 'dist'),
                        routes: ['/home', '/hospital', '/jingxuan'],
                        // routes: ['/home', '/hospital', '/jingxuan'],
                        renderer: new Renderer({
                            inject: {
                                foo: 'bar'
                            },
                            captureAfterTime: 5000,
                            headless: true,
                            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，二者的事件名稱要對應上。
                            renderAfterDocumentEvent: 'render-event',
                        }),
                    }

                )
            ],
        }
    },
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [__dirname, './src/assets/less/base.less']
        }
    },

    devServer: {
        open: true //打開瀏覽器窗口
    },

    //定義less全局變量
    css: {
        loaderOptions: {
            less: {
                data: '@import "@/assets/less/base.less";'
            }
        }
    },

    productionSourceMap: false
}

我這裏就是幾個簡單的配置，引入了一個公共的less。不要的話本身就刪掉就能夠了。

二、接下來設置main.js

new Vue({
    router,
    store,
    render: h => h(App),
    mounted() {
        document.dispatchEvent(new Event('render-event'))
    }
}).$mount('#app')

三、執行npm run build

四、就能夠目錄下的dist文件夾裏，有以下內容

五、應該就是想要的東西了，具體怎麼操做，尚未接到通知。

 

2、設置meta標籤的keywords和title

一、引入vue-meta-info，傳送門：

npm i vue-meta-info --save

二、main.js中引入

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

三、進入vue頁面中

components: {  },
    metaInfo: {
        // set a title
        title: '這個是設置的title', 
        meta: [
            {
                // set meta
                name: "keyWords",
                content: "My Example App"
            }
        ],
        link: [
            {
                // set link
                rel: "asstes",
                href: "https://assets-cdn.github.com/"
            }
        ]
    },
    data() {
        return{}

        }

和data同級。

而後看一下頁面就應該有了