vue预渲染解决SEO(页面刷新失败)

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平行

文件结构为

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

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

打包之后安装服务

npm i http-server -g

进入dist文件夹

cd dist

启动

hs -o -p 8989

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

 

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

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

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