<i id='k9qfc42n'><tr id='68vm3egx'><dt id='66kcr1z4'><q id='ged0zv71'><span id='i1a8ljlc'><b id='z2otyski'><form id='l60m27s2'><ins id='dfbahpoz'></ins><ul id='rj1vm85u'></ul><sub id='lufmadas'></sub></form><legend id='1mve6ozl'></legend><bdo id='f6yw2vaq'><pre id='ihyzhga2'><center id='toeecbuw'></center></pre></bdo></b><th id='h64j8ksq'></th></span></q></dt></tr></i><div id='0xqgzbct'><tfoot id='hq4b99l6'></tfoot><dl id='57k53ayo'><fieldset id='a3k6p0ty'></fieldset></dl></div>
  • <tfoot id='07fsne1n'></tfoot><legend id='0s46powj'><style id='gy8c74n8'><dir id='vcq8qajs'><q id='bjwfm8si'></q></dir></style></legend>
          <tbody id='4ba5p6rp'></tbody>

        <small id='laitp4qn'></small><noframes id='dnoux5vc'>

        网站建设公司当前位置 : 网站建设公司 > 知识普及

        关于vue的seo优化

        发布时间:2021-08-30 16:12   浏览次数:次   
        问题描述
         
        传统的vue通过vue-cli脚手架搭建完成后要通过npm run build来打包生成最后的要放到线上的html代码。
        vue搭建的单页面项目有各种优点,易维护、代码简洁、开发体验好等等。但是对于一些传统的互联网公司,vue单页面却有一个很致命的问题就是seo优化的问题。下面是正常打包的vue单页面目录以及index.html的代码。
         
         
        目录只有一个index.html文件并且这个html文件里面是没有任何内容的只有一个id为app的用来挂载vue实例的div。
        谷歌搜索引擎已经可以很好地支持单页面的信息爬取,但是谷歌是国外的国内使用要翻墙所以不作考虑,百度是国内最主要的搜索引擎,百度并不能爬取单页面的数据所以这样的项目如果上线了别人在百度搜索的时候很难找到这个项目。由于我目前公司的大部分项目都是需要做seo优化的所以这个问题就丢到了我这里。
         
        解决办法
         
        这里先提一下如果打包的时候报错可能你需要npm安装一下puppeteer(这东西有点大大概300多M)
         
        这里我用了两天的时间来解决了这个问题。
        第一步通过prerender-spa-plugin来进行vue.config.js的配置
        npm isntall prerender-spa-plugin --save
        这个东西是vue用来将单页面应用打包成多页面的第三方插件,安装完成之后在vue.config.js配置配置如下
         
         
        const PrerenderSPAPlugin = require('prerender-spa-plugin');
        const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
        const webpack = require('webpack');
        const path = require('path');
         
        module.exports = {
            configureWebpack: config => {
                if (process.env.NODE_ENV !== 'production') return;
                return {
                    plugins: [
                        new PrerenderSPAPlugin({
                            // 生成文件的路径,也可以与webpakc打包的一致。
                            // 下面这句话非常重要!!!
                            // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
                            staticDir: path.join(__dirname,'dist'),
                            // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
                            routes: ['/','/about','/store_vuex','/cssAnimate','/connectMongoDB','/childParent','/child1','/elementUI'],
                            // 这个很重要,如果没有配置这段,也不会进行预编译
                            renderer: new Renderer({
                                inject: {
                                    foo: 'bar'
                                },
                                headless: false,
                                // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
                                renderAfterDocumentEvent: 'render-event'
                            })
                        })
                    ],
                };
            }
        }
        然后要将vue路由的模式改成history
        最后mian.js入口文件中要加入这段代码。其中render-event要和vue.config.js中的renderAfterDocumentEvent对应
         
        new Vue({
          router,
          store,
          render: h => h(App),
          mounted () {
            document.dispatchEvent(new Event('render-event'))
          }
        }).$mount('#app')
        npm run build现在打包之后的目录结构就变成了这样了,以及每个文件夹的index.html代码,
        现在的html代码就有了.vue文件中的template相关代码,但是却多了一个问题就是每个文件夹中的index.html代码都引用了所有的js和css文件这是不利于seo优化的。因此还没有结束。
         
         
        为什么会有这么多js和css呢,因为vue-cli在打包的时候每个.vue文件的script和style标签都会打包成一个对应的js和css,即使你标签里面什么都没有写。
         
        第二步我想到的解决办法是压缩合并体积比较小的js和css文件
        找了vue-cli的文档没有搜索到相关的资料,因此转战webpack
        这个api可以用来设定一个最小的合并文件体积,在上边的webpack配置中的plugins中加入这段代码目测是10000=1kb
         
         
        const webpack = require('webpack');
         
         
        new webpack.optimize.MinChunkSizePlugin({
                            minChunkSize: 10000 // 通过合并小于 minChunkSize 大小的 chunk,将 chunk 体积保持在指定大小限制以上
                        }),
        然后npm run build
        还是那个目录,但是js和css缩减了很多。
         
         
         
          <tbody id='zfu0yo82'></tbody>
        <tfoot id='1mbzmyq6'></tfoot>

        <small id='vhz5eu5j'></small><noframes id='g94o8ut5'>

        • <legend id='xnhkdwul'><style id='j1r3il41'><dir id='id07k55y'><q id='kps3o33f'></q></dir></style></legend>
        • <i id='cgziq4yo'><tr id='zy56q2lz'><dt id='rdm7ivg3'><q id='bkbwoneo'><span id='2dmuuorc'><b id='dxhq1ovc'><form id='bjzvn77s'><ins id='azniey1q'></ins><ul id='5hgjlu4q'></ul><sub id='tnuwzhfj'></sub></form><legend id='5l6jojo9'></legend><bdo id='5wdr0kh6'><pre id='g0vd4ra3'><center id='wlo6kkvs'></center></pre></bdo></b><th id='qj272czm'></th></span></q></dt></tr></i><div id='0q3kqw8g'><tfoot id='annsqy4e'></tfoot><dl id='ix7x191q'><fieldset id='nww1hbtj'></fieldset></dl></div>

              本文来源于网络,若有侵权请联系3449817223#qq.com,将在第一时间删除。

              上一篇:seo网站推广方法简介 小程序开发上一篇
              下一篇公众号开发下一篇:关于vue项目的seo问题

                <tbody id='r692ez3o'></tbody>

              <legend id='ikj0uva1'><style id='c0sz4lvz'><dir id='vqlnshdm'><q id='854aohc0'></q></dir></style></legend>
              <i id='2dzl55zx'><tr id='kw4qtmug'><dt id='fxy8em56'><q id='ctvvhz62'><span id='g0w3voif'><b id='s996pi0z'><form id='lofeizzy'><ins id='xha9dqxr'></ins><ul id='1fknnalg'></ul><sub id='0on99e8j'></sub></form><legend id='ciesjarx'></legend><bdo id='1bkr6ad5'><pre id='u5gr45jq'><center id='mo8cmbed'></center></pre></bdo></b><th id='xh2fwum2'></th></span></q></dt></tr></i><div id='h8fbwsl7'><tfoot id='by24ezdh'></tfoot><dl id='p2hz8wv0'><fieldset id='o26kts0x'></fieldset></dl></div>
              1. <tfoot id='l4lpc6xu'></tfoot>
                • <small id='h588ass1'></small><noframes id='7zkm81qg'>