一、meta标题头配置
1、配置google分享和爬虫抓取头
ini
<meta property="og:type" content="website" />
<meta property="og:title" content="**"/>
<meta property="og:description" content="***" />
<meta property="og:url" content="***"/>
<meta property="og:image" content="***.jpg" />
2、插件"vue-meta-info",使得每个页面都有独立的title配置:
安装vue-meta-info
//yarn $ yarn add vue-meta-info //NPM npm i vue-meta-info --save
2.
在main.js文件中引入vue-meta-info
import Vue from 'vue' import MetaInfo from 'vue-meta-info'; Vue.use(MetaInfo)
3.
静态使用 metaInfo
动态使用 metaInfo
二、SPA页面静态化
安装prerender-spa-plugin
注意因为原来的"prerender-spa-plugin"已经不更新的,在webpack5.0版本会有BUG,所以需要用别人二次修改后的新适配版本
css
npm i @dreysolano/prerender-spa-plugin -D
在vue.config.js配置
const PrerenderSPAPlugin = require('@dreysolano/prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const vueConfig = { configureWebpack: { // webpack plugins plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/'], // 这个很重要,如果没有配置这段,也不会进行预编译 renderer: new Renderer({ injectProperty: '__PRERENDER_INJECTED', inject: { foo: 'bar' }, // 在 app.vue onMounted函数中 document.dispatchEvent(new Event('custom-render-trigger')),两者的事件名称要对应上。 renderAfterDocumentEvent: 'custom-render-trigger', // renderAfterTime: 6000, // headless: false }) }) ] }, }
2.
路由模式必须是history
mode : "history",
3.
App.vue setup onMounted函数
setup() { onMounted(() => { document.dispatchEvent(new Event('custom-render-trigger')) }) }