超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript

vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript

注意
注意
注意：本文章所有例举内容，页面均为纯静态页面，没有任何ajax请求，例子适用官方网站等不需要动态渲染的网站，至于能不能依葫芦画瓢应用在带ajax的页面上，这里没做验证

例子采用的各种环境版本：
node版本为：v14.15.0（node -v）
npm版本为：6.14.8（npm -v）
@vue/cli 4.5.6（vue -V）

举个例子，这里我创建一个标准的vue cli项目

1 . 安装 prerender-spa-plugin

详细官方文档也可以参考：链接1npm、链接2gitHub

npm install --save prerender-spa-plugin

（网上很多说，如果不是科学上网，会出现报错的问题，但我这里是没有报错的）
报错的话是prerender-spa-plugin中有puppeteer可能会报错

ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

此时可以试试淘宝镜像安装

cnpm install --save prerender-spa-plugin puppeteer

不过还是建议科学上网下载，没那么多P事

2 . 配置

（配置非常重要，配置不好的话就会打包报错，或者打包完之后页面无法跳转等）

步骤1

首先找到 build目录下的 webpack.prod.conf.js 文件

把这两句话粘进去

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

然后再看这个文件里的代码，找到 plugins 数组

把下面这段代码，找个喜欢的地方，塞到 plugins 数组里

new PrerenderSPAPlugin({// 生成文件的路径，也可以与webpakc打包的一致。// 下面这句话非常重要！！！// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。staticDir: path.join(__dirname, "../dist"),// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。routes: ["/htmlPageWrap1","/htmlPageWrap2","/htmlPageWrap3",],// 这个很重要，如果没有配置这段，也不会进行预编译renderAfterElementExists: true,captureAfterTime: 50000,renderer: new Renderer({inject: {foo: "bar"},// 这个要选false，这样你在打包的时候，会看到一个浏览器调试器会闪出大约1-2秒的时间// 如果你发现这个浏览器调试器，出现之后，一直不消失，打包进度也一直不动，也不报错，那恭喜你，你有什么地方出错了// 这个地方非常坑，出错了不会提示你，提示你的东西不是栈溢出，就是什么少 > 符号，根本不是你出错的地方// 这时你可能要重新好好检查一下你什么地方出错了headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。renderAfterDocumentEvent: "render-event"})})

步骤2

接下来在main.js中配置这段代码，粘进去放在最下面就行了

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

步骤3

把router下的index.js变更为mode: "history"，变更之后正常启动的本地服务可能无法正常跳转，但是打包之后的是可以的

2 . 配置SEO

详细官方文档也可以参考：链接npm

这个东西下载一下配置一下就很简单了
首先下载依赖包

npm install vue-meta-info --save

然后再main.js配置这句话

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

接下来在你想要配置seo的主页面进行配置就行了，MetaInfo的更多配置项，自己去文档看看

接下来直接 build 打包就行了

打包完成之后去dist目录下用git起一个http服务试验一下

http-server是要下载依赖的，教程链接：链接

启动之后F12看看mate标签

这样就结束了

超详细！！vue、vue-cli脚手架项目使用prerender-spa-plugin，解决SEO并为其添加title，keyWords，descript相关推荐

vue搭建cli脚手架环境（出现问题及解决，主要是node版本低）
vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) 参考文章: (1)vue搭建cli脚手架环境(出现问题及解决,主要是node版本低) (2)https://www.cnblogs. ...
vue create xxx创建项目过程中报错的解决方法
vue create xxx创建项目过程中报错的解决方法报错图例解决办法报错图例解决办法首先检查电脑里是否安装node.js 检查方法:命令行输入 node -v 还要再输入一个 npm - ...
超详细的VsCode创建SpringBoot项目(图文并茂)
文章目录超详细的VsCode创建SpringBoot项目(图文并茂) 一.安装jdk 1.OpenJDK 2.Java SE Development Kit 8 二.安装maven 1.下载 2.配 ...
超详细版本vue+capacitor（自定义capacitor插件）编写移动端应用
人生苦短,我们要: 我的环境 Node v16.13.0 npm v8.1.0 mac的话需要安装Xcode windows的话需要Java 8 JDK和Android Studio软件本文以安卓开 ...
vue 3.0 脚手架项目搭建(含javascpt和typescript两种)
目录前言一.重新安装vue/cli 二.创建项目 1.创建空白项目 2.选择vue版本 3.启动项目三.总结前言提示:vue已经进入了3.0的时代,具体的优点大家可以自行百度搜索,相关UI框 ...
超详细的Vue渲染原理讲解
目录一.Vue简介 1. MVVM.MVP和MVC 2. Vue的基本配置二.Vue渲染原理 1. HTML与模板 2. Vue组件的完整渲染过程 (1). Vue自身的初始化阶段 (2). 组件 ...
[超详细]Echarts+vue+百度地图动态实现城市疫情地图
动态中国城市疫情地图的实现,主要是参照Echarts官网官方案例的方法:Examples - Apache ECharts ,但是官方给的案例数据都是静态写在Option的Data中的无法根据疫情实时 ...
vue cli脚手架项目利用webpack给生产环境和发布环境配置不同的接口地址或者不同的变量值。...
废话不多说,直接进入正题,此文以配置不同的接口域名地址为例子项目根目录下有一个config文件夹,基础项目的话里面至少包括三个文件, 1.dev.env.js 2.index.js 3.prod.e ...
一篇超详细的vue项目前端自动化测试教学！
为什么需要写前端自动化大部分企业为了追求开发效率,所以并没有去强制要求员工写前端自动化测试的代码.另一部分企业则会要求前端开发额外写前端自动化测试.那么写和不写到底有哪些区别呢? 不写前端自动化测试 ...