一. 使用prerender-spa-plugin插件预渲染
- vue-cli2.0版本
- 安装插件
npm install prerender-spa-plugin -S
- 在webpack.prod.config.js 中添加
const PrerenderSPAPlugin =require('prerender-spa-plugin')
const Renderer=PrerenderSPAPlugin.PuppeteerRenderer
//plugins 添加PrerenderSPAPlugin
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
staticDir: path.join(__dirname, '../dist'),
// 对应自己的路由文件
routes: ['/','/news','/about','/contact'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
})
3.修改main.js
new Vue({
el: '#app',
router,
data:{
hasShow:true,
},
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('custom-render-trigger'))
}
})
二. 优化配置meta，使用vue-meta-info
- 安装
npm install vue-meta-info -S
2.main.js引用
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
- 相应路由页面配置metaInfo
// about.vue
export default {
metaInfo: {
title: '关于我们',
meta: [{
name: 'keywords',
content: '关于我们'
},
{
name: 'description',
content: '关于我们的页面'
}
],
},
name: "about",
....
}
- 配置 App.vue
metaInfo(){
return this.metaInfo
},
data(){
return{
metaInfo:{
title:'首页',
meta: [{
name: 'keywords',
content: '首页'
},
{
name: 'description',
content: '首页'
}
],
}
}
},
watch:{
$route(to){
if(to.name==="about"){//根据不同路由配置不同
this.metaInfo= {
title: '关于我们',
meta: [{
name: 'keywords',
content: '关于我们'
},
{
name: 'description',
content: '关于我们的页面'
}
],
}
}else{
this.metaInfo={
title:'首页',
meta: [{
name: 'keywords',
content: '首页'
},
{
name: 'description',
content: '首页'
}
],
}
}
}
}
