vue-cli+prerender-spa-plugin配置SEO

通過vue-cli頁面可以搭建spa單頁面應用，但單頁面項目不利於網站的SEO，現在vue也提供了預渲染，服務器渲染的相關操作，這裏的介紹一種相對簡單的，通過 prerender-spa-plugin來配置，將單頁面變成多頁面

第一步：引入依賴 prerender-spa-plugin

npm i prerender-spa-plugin --save-dev

第二步 ：在vue.config.js配置

默認vue-cli3x項目是沒有vue.config.js文件，這個要自己創建的，配置如下

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    publicPath: process.env.NODE_ENV == "production" ? "././" : './',
    assetsDir: "./dist",
    configureWebpack: config => {
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路徑，也可以與webpakc打包的一致。     
                    // 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。
                    staticDir: path.join(__dirname,'dist'),
                    // 對應自己的路由文件，比如a有參數，就需要寫成 /a/param1。
                    routes: ['/', '/contact','/demo','/dev','/footer','/header','/home','/news','/scheme'],
                    // 這個很重要，如果沒有配置這段，也不會進行預編譯
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
            // 這裏是配置第三方的插件的
            externals : {
                AMap: "AMap",
            }
        };
    }
};

第三步 ： 在main.js 添加監聽方法，這裏的方法跟vue.config.js裏面的方法名字要一致

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

第四步 ： 在router文件的index.js 將路由的模式修改爲 history。默認mode 是 hash

在這裏要注意的 這裏的資源打包默認都是在從根目錄開始的，放在服務器也是根目錄開始，如果不想要從根目錄開始，要根據文件的話 就要配置一下 router的base,根據生產環境配置不同的路徑  

 base: process.env.NODE_ENV == "production" ? "/office/dist" : './',

 

這裏的目錄名字要對應，看你怎麼創建，就對應起來就可以了，而上圖會發現編譯出來的文件不在是一個頁面了，而是多頁面了

第五步：配置對應的meta參數

網站的關鍵字，介紹，相關信息這些也是重要的，而不同的頁面 mete 的介紹也不同，這裏使用 vue-meta-info，可以爲不同的頁面配置不同的meta,

 1.引入vue-meta-info

npm i vue-meta-info --save-dev

 2. 在main.js引入

import MetaInfo from "vue-meta-info"; //
Vue.use(MetaInfo);

3.在vue.js文件中使用，與生命週期同一級別，添加一個 metaInfo函數，返回一個對象

 重新編譯之後，你會發現在頁面中，有你所添加的相關信息

 

 如果覺得幫助到你，動動小手指點個贊吧！！！！！