前端笔记 - Vue SPA SEO方案 - 使用预渲染插件prerender-spa-plugin

前言

SPA、SEO、SSR 介绍

已经有大佬总结的够详细，够简单易懂了。参考阅读：https://www.jianshu.com/p/fcb98533bc18?tdsourcetag=s_pctim_aiomsg

预渲染插件使用

版本要求

"vue": "^2.6.10",
"prerender-spa-plugin": "^3.4.0",
"@vue/cli-service": "^3.8.0",

安装

 cnpm install prerender-spa-plugin --save

配置文件更改

vue.config.js

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

module.exports = {
   
  // 生产环境是否生成 sourceMap 文件
  productionSourceMap: false,
  // 基础路径
  // 比如部署在https://www.my-app.com/my-app/，则设置 publicPath 为 /my-app/
  publicPath: '/',
  // 输出文件目录
  outputDir: 'dist',
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
  assetsDir: 'static',
  // 是否使用包含运行时编译器的 Vue 构建版本
  runtimeCompiler: false,
  // 是否为 Babel 或 TypeScript 使用 thread-loader。
  // 该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产
  // 构建，在适当的时候开启几个子进程去并发的执行压缩
  parallel: require('os').cpus().length > 1,
  
  // 以上是打包基本配置，根据项目需求更改
  configureWebpack: config => {
   
  	if