前端vue项目实现伪静态 vue SEO优化

伪静态实现方法

1.下载插件 prerender-spa-plugin

npm i prerender-spa-plugin -s

2.在vue.config.js里面配置插件 prerender-spa-plugin

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

module.exports = {
  publicPath: "/",
  outputDir: "dist",
  productionSourceMap: false,
  configureWebpack: {
    plugins: [
      new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 10000,
      }),
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, "dist"),
        // 这里对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
        routes: ["/", "/index","/about"],
        renderer: new Renderer({
          inject: {
            foo: "bar",
          },
          headless: false,
          // 这里对应main.js 中 document.dispatchEvent(new Event('render-event'))
          renderAfterDocumentEvent: "render-event",
        }),
      }),
    ],
  },
 
};

3.配置 main.js

new Vue({
  router,
  store,
  render: h => h(App),
   mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

4. 执行打包命令  npm run build

meta标签关键词优化

1. 下载插件 vue-meta

npm i vue-meta -s

2.在main.js中配置插件

import Meta from 'vue-meta'
Vue.use(Meta)

3.页面使用

data() {
    return {
      setting: {
        title: "", // 页面标题
        description: "", // 页面描述
        keywords: "", // 页面关键字
      },
    }
}，
// 动态mate
metaInfo() {
  return {
    title: this.setting.title,
    meta: [
      { name: "keywords", content: this.setting.keywords },
      { name: "description", content: this.setting.description },
    ],
  };
},
mounted(){
   this.getSetting()
},
methods:{
   // 模拟动态获取关键词
    getSetting(){
       this.setting = {
          title: "页面标题",
          description: "页面描述",
          keywords: "页面关键字",
      },
    }
}