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函数，返回一个对象

 重新编译之后，你会发现在页面中，有你所添加的相关信息

 

 如果觉得帮助到你，动动小手指点个赞吧！！！！！