Vue 项目静态化打包 seo优化

主要是这两个包，实现静态化打包
require(‘prerender-spa-plugin’);
import MetaInfo from ‘vue-meta-info’
不足点：路由动态传值 ，请求api获取数据，不能打包出静态化，在路由组件创建前调用接口，并且数据绑定模版上可以打包静态结构代码，适用于宣传页项目开发，动态数据完全受限无法满足需求

prerender-spa-plugin使用注意⚠️ 在main.js 入口文件 创建Vue 添加

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

vue-meta-info 使用

//全局注册
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

路由组件使用
export default {
  metaInfo: {
        title: window.logoName + 'abort',
        meta: [
            {
                name: 'keywords',
                content: '关键字2,关键字2,关键字2'
            },
            {
                name: 'description',
                content: '这是一段网页的描述2'
            }
        ]
    },
  data() {
    return {}，
  },
  created(){},
  //...

webpack配置完整代码

const path = require('path');

const CompressionPlugin = require('compression-webpack-plugin')

// npm run build后，打开localhost:8888，项目结构
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

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

const debug = process.env.NODE_ENV === "production"

function resolve(dir) {
    return path.join(__dirname, dir)
}

module.exports = {
    lintOnSave: false,
    runtimeCompiler: true, // 关键点在这
    pluginOptions: {},
    publicPath: "./", // ./改为/
    outputDir: "server/dist",
    // assetsDir: "static",
    indexPath: "index.html",
    productionSourceMap: false,
    filenameHashing: true,
    css: {
        loaderOptions: {
            sass: {
                prependData: `@import "