预编译解决vue-cli 4.0项目的seo问题

预编译解决vue-cli 4.0项目的seo问题#

vue项目上线之后要求解决一下seo问题，现在总结一下 希望能帮到各位
ps：其实网上已经有很多的解释了 我这边就不多做介绍
贴一下vue-cli和依赖的版本

1，需要用到我们的prerender-spa-plugin 和 vue-meta-info

//这是预编译的
npm i prerender-spa-plugin --save
//这是生成meta
npm i vue-meta-info --save

2,安装好就需要配置我们的vue.config.js 在我们的项目中找到vue.config.js

（没有就需要自己创建 对的没错自己创建就行 因为项目的vue.config.js（package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载）

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({
    //staticDir: path.join(__dirname, process.env.VUE_APP_OUTPUT_DIR),如果直接用path 可能会报错 不要问为什么我要特意备注一下 
     staticDir: path.join(__dirname,'dist'),
     routes: ['/First', '/Abutton','/last','/tahoe','/home','/NewsDetail'],
     renderer: new Renderer({
      inject: {
       foo: 'bar'
      },
      headless: false,
      // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
      renderAfterDocumentEvent: 'render-event'
     })
    }),
   ],
  };
 }
}

3，在我们的mian.js文件中就可以进行配置

new Vue({
  router,
  store,
  render: h => h(App),
  methods: {
  },
  //这个是重点 其他不用 
  mounted () {
    document.dispatchEvent(new Event('render-event')) // 预渲染
}
}).$mount('#app')

**

4，然后打包就可以

**（打包的名对应的就是我们的 routes: [’/First’, ‘/Abutton’,’/last’,’/tahoe’,’/home’,’/NewsDetail’]）

5，下面就可以在我们的页面（就是vue页面）中写上我们的meta就可以

//这是生成meta的  
//main.js文件
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

6，下面就可以直接在我们的vue页面script中加进来

  // 配置title和meta数据
  metaInfo: {
    title: 'xxxxx',
    meta: [
      {
        name: 'keywords',
        content: 'xxxx'
      },
      {
        name: 'description',
        content: 'xxxxx'
      },
      {
      //这个只是我项目中用到 具体要不要看你们自己的项目
        name: 'baidu-site-verification',
        content: 'xxxx'
      }
    ]
  },

7，应该是没了 如果还有什么其他的问题欢迎各位留言讨论