vue预渲染解决SEO(页面刷新失败)prerender-spa-plugin

朴灿烈づ我的快乐病毒、 2021-08-31 01:02 667阅读 0赞

**1.安装依赖**

npm install --save prerender-spa-plugin

**2.在build文件夹中webpack.prod.conf.js中加入**

const PrerenderSPAPlugin = require('prerender-spa-plugin')
    const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
    
    
    
    plugins数组中添加
    new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, '../dist'),
          
          // 对应自己想要做预渲染的路由文件，比如index有参数，就需要写成 /index/param1。
          routes: ['/','/aboutUs'],
          
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
              inject: {
                foo: 'bar'
              },
              headless: false,
              // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
              renderAfterDocumentEvent: 'render-event',
              // renderAfterTime: 5000
          })
      })

**3.在main.js中**

mounted() {
        document.dispatchEvent(new Event('render-event'));
      }

npm run build 进行打包，如果没有成功就再次执行上面三个步骤重复一次

成功的结果就是会在dist文件夹中多出你想要预渲染的文件，和static,index平行

文件结构为

![20200717140017711.png][]

此时index.html就是对应的默认路由的html内容，开始没有加预渲染之前，这个文件中只有几行代码，预渲染之后就会出现对应路由中的所有html静态内容，这里就完成了，这样在搜索引擎抓取内容的时候就可以读取到这些内容，将整个dist文件夹全部放进服务器，常规部署就可以了

除了根目录刷新失败的的解决方法:修改config/index.js 中的build部分的 assetsPublicPath: '/'

打包之后安装服务

npm i http-server -g

进入dist文件夹

cd dist

启动

hs -o -p 8989

可测试打包后需要部署的项目

还有一种情况就是页面中部分文件加载失败（路径问题，这不是跟路由）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70][]

![20200721155519971.png][]

自行判断文件路径问题，这里应该是../

./是在跟路由中是正常的

[20200717140017711.png]: /images/20210813/19c7225a4226401a83f2bc9981b51412.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xhbnNlZ3VodWk_size_16_color_FFFFFF_t_70]: /images/20210813/e936b6491f924f67a07210dc308dc1af.png
[20200721155519971.png]: /images/20210813/2a58769d4a684ae0b11f42cfe31e6dae.png