vue SEO优化

344 阅读3分钟

分包打包

安装prerender-spa-plugin 插件

安装 vue-meta-info 配置title和meta:


3.0的 配置文件中


const webpack = require('webpack')

const PrerenderSPAPlugin = require('prerender-spa-plugin')

const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

const path = require('path')

module.exports = {

      outputDir: 'dist',

      publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',

      assetsDir: 'static',

      lintOnSave: process.env.NODE_ENV !== 'production',

      productionSourceMap: false,

     devServer: {

            disableHostCheck: true,

            host: '0.0.0.0',

             port: 8087, // can be overwritten by process.env.PORT, if port is in use, a free               one will    be determined https://test.8boluo.com

             proxy: {                 

                       '/apidev': {    

                                 target: '网址',      

                                 changeOrigin: true,       

                                pathRewrite: { '^/apidev': '' 

                               }  

                        }       

               }

// cssSourceMap: false

},

css: {

      loaderOptions: {

           less: {

                modifyVars: {

                     red: '#03a9f4',

                    blue: '#3eaf7c',

                   orange: '#f08d49',

                   'text-color': '#111'

                }

           }

},

configureWebpack: config => {

       if (process.env.NODE_ENV !== 'production') return

       return {

            plugins: [

                 new PrerenderSPAPlugin({

                        // 生成文件的路径,也可以与webpakc打包的一致。

                        // 下面这句话非常重要!!!

                         // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。

                          // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。

                         staticDir: path.join(__dirname, 'dist'),

                          routes: ['/index', '/may', '/ceshiwenjian'],

                         // 这个很重要,如果没有配置这段,也不会进行预编译

                          server: {

                                 proxy: {

                                       '/api': {

                                            target: '网址',

                                            secure: false

                                        }

                                   }

                          },

                         renderer: new Renderer({

                                inject: {

                                      foo: 'bar'

                                },

                                headless: false,

                                // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。

                                renderAfterDocumentEvent: 'render-event'

                             })

                    }),

                    new webpack.ProvidePlugin({

                          $: 'jquery',

                          jQuery: 'jquery'

                    })

                  ]

               }

     },

parallel: require('os').cpus().length > 1

}

// new webpack.ProvidePlugin({// $: 'jquery',// jQuery: 'jquery'// })