vue-meta-info 官方地址： monkeyWangs/vue-meta-info
添加所需插件
vue-meta-info
npm install vue-meta-info --save-dev
prerender-spa-plugin
npm install prerender-spa-plugin --save-dev
配置文件
build/webpack.base.conf.js
// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')
module.exports = {
// ...
plugins: [
new PrerenderSpaPlugin(
// 编译后的html需要存放的路径
path.join(__dirname, '../dist'),
// 列出哪些路由需要预渲染
[ '/' ]
)
]
}
全局引入 vue-meta-info
src/main.js
import Vue from 'vue'
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
组件内静态使用 metaInfo
<template>
...
</template>
<script>
export default {
metaInfo: {
title: 'page title', // set a title
meta:{
keywords: 'keywords'//keywords
},{
content: 'content'//content
}]
}
}
</script>
此方法打包后的文件目录，依然为单页面，但页面中的keywords以及content以修改
