使用vue-cli3构建的vue单页面项目seo-CSDN博客

1.插件prerender-spa-plugin，vue-meta-info

2.prerender-spa-plugin插件进行页面的预渲染，vue-meta-info添加页面title,keywords

3.安装插件

npm install prerender-spa-plugin --save
npm install vue-meta-info --save
复制代码

4.vue.config.js配置

const prerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = prerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');

configureWebpack: config => {
if(process.env.NODE_ENV !== 'production') return;
return {
  plugins: [
    new prerenderSPAPlugin({
        /*编译后的html需要存放的路径*/
      staticDir: path.join(__dirname,'dist'),
        /*需要预渲染的路由路径 页面过多，可能导致预处理不成功，可分批次打包*/
      routes: ['/',/smileTest','/product','/case','/contact','/about','/indications'], 
      renderer: new Renderer({
        renderAfterDocumentEvent: "render-event",
        /*渲染时显示浏览器窗口。用于调试。*/
        headless: false,
        inject:{
          foo:'bar'
        },
        /*延时渲染 如果页面有从接口获取的数据，最好加上延时渲染*/
        captureAfterTime: 5000
      })
    })
  ]
}
复制代码

5.main.js 配置

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({
  router,
  store,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event')) //与vue.config.js（renderAfterDocumentEvent）事件一致
  }
}).$mount('#app')
复制代码

6..vue文件

export default {
   metaInfo: {
       title:'页面title',
       meta:[{
           name: 'keywords',
           content: '关键字'
       }]
   } ,
   data(){
       return{
           
       }
   }
}
复制代码

7.打包后的目录结构

8.遇到的问题

因为我的项目是一个比较小的移动端的网站，几乎没有与后台的数据交互,所以在进行预渲染时并没有遇到很多问题，
除了打包时报 “Unable to prerender all routes!”（不能预渲染所有路由）,查找各种资料并没有找到特别好的
解决方法，只能选择分批次打包。**如果有好的解决方法，望留言指导**
复制代码

9.参考文档

官方文档

www.npmjs.com/package/pre…

www.npmjs.com/package/vue…

其他

blog.csdn.net/qq_42606051… www.cnblogs.com/tiedaweisha… blog.csdn.net/codeliuguis…