Vue项目的预渲染与页面元信息配置

测试环境

利用脚手架生成一个vue项目，需要选择 vue-router

# 安装 Vue Cli
cnpm install -g @vue/cli

$ vue --version
3.12.0

# 创建一个项目
vue create vue-demo

一、预渲染

1、安装插件

cnpm install prerender-spa-plugin --save

2、配置预渲染 vue.config.js 中增加,没有就在项目根目录新建一个

配置 里边的 routes 选项，说明需要预渲染的路由页面

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // 生成文件的路径，也可以与webpakc打包的一致。
                    // 下面这句话非常重要！！！
                    // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
                    routes: ['/', '/about'],
                    // 这个很重要，如果没有配置这段，也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

3、在main.js中增加

new Vue({
  router,
  render: h => h(App),

  // 增加以下内容
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }

}).$mount('#app')

4、about.vue 文件写上固定文本

  
    这是about
  

5、router.js路由文件设置 检查好路由信息配置about.vue

const routes = [
  {
    path: '/about',
    name: 'about',

    component: () => import('../views/About.vue')
  }
]

router.js 中设置mode: “history”

const router = new VueRouter({
  mode: 'history',
  routes
})

6、编译

npm run build

查看生成的文件： dist/about/index.html 可以看到已经有内容了

参考: Vue 预渲染实现方案

二、设置meta元信息

基于上面的配置，继续

1、安装插件

cnpm install vue-meta-info --save-dev

2、设置main.js

import MetaInfo from 'vue-meta-info' 

Vue.use(MetaInfo)

3、配置meta信息

  
    这是about
  



export default {
  // 这些代码会转成网页的meta标签里的内容
    metaInfo: {
        title: '关于我们',
        meta: [
            {
                name: 'keywords',
                content: '关键字'
            },
            {
                name: 'description',
                content: '网页描述'
            }
        ]
    }
}

4、编译查看，meta标签中已经有内容了

参考 vue预渲染