主要的库：prerender-spa-plugin （注意必须要用history的路由模式）
先下载 ：
代码语言：javascript复制npm i prerender-spa-plugin -S然后在vue.config.js添加配置..
代码语言：javascript复制const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require("path");
module.exports = {
configureWebpack: () => {
if (process.env.NODE_ENV !== "production") return;
return {
plugins: [
new PrerenderSPAPlugin({
// 输出目录
staticDir: path.join(__dirname, "dist"),
// 打包的路由
routes: ["/", "/mood","/bookInfo/id"],
renderer: new Renderer({
inject: {
foo: "bar"
},
headless: false
})
})
]
};
}
};如果vue-cli的版本比较老的（暴漏了webpack相关配置）
需要在build/webpack.prod.conf.js中进行配置：
找到plugins （是个array 把新增PrerenderSPAPlugin的配置加进去。。。）
代码语言：javascript复制plugins:[
// 新增 PrerenderSPAPlugin
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, "../dist"),
// Required - Routes to render.
routes: ["/", "/mood"],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
ignoreJSErrors: true,
inject: {
foo: "bar"
},
headless: false,
renderAfterTime: 5000
})
})
]然后在最外层的main.js中添加：
代码语言：javascript复制new Vue({
el: "#app",
router,
components: { App },
template: "<App/>",
// 添加
mounted() {
document.dispatchEvent(new Event("custom-render-trigger"));
}
});配置完成了之后 直接打包..
代码语言：javascript复制npm run build
打包成功之后 dist目录下会出现两个新的目录 正常打开
可能会报错，一般报错就是资源路径的问题，需要把./static 换成../static 就可以了
好了到了这一步感觉大功告成了，
然后一个天坑来了：
prerender-spa-plugin不支持动态路由
啥意思呢，举个例子
我们的博客文章 的url是动态的带id的：http://biaoblog.run/#/bookInfo/1641975877316
那么使用prerender预加载是没办法动态打包了，
当然也有一个很极限的实现方法：
下面的内容是引用一个github主的：
代码语言：javascript复制我弄了个 blingshow——中国路灯制造网，但是我是用vue ts写的，写之前没考虑什么SEO等等，以前一直写后台管理系统，直接面向用户的网站只写过一个，就是雀巢桶装水，不过那个是jsp写的，而且记得当初上线前当时的老大让我加了段代码，说是给百度SEO用的，好像花钱的，这次自己独立建个小站，写完后才意识到百度收录、SEO等等问题，这是以前没接触过的，纯给自己埋坑了。
以前也听过预渲染这个名词，不过一直没在意，这次为了解决我网站SEO相关问题，不得不去研究下。好在vue官网直接给了推荐：https://github.com/chrisvfritz/prerender-spa-plugin， 我看了文档才知道，固定的路由比如 /hot, /iot, /traffic 等配置下完全没问题，可是动态路由比如产品详情页（根据产品编号去获取数据）就很难办了。
而且百度SEO要经常更新内容，发外链等等，起初我不懂我的网站怎么更新内容，我路由就那么几个，又不是博客，后来仔细一想，那么多产品，每个产品编号都不同，那么每个产品详情页不就是一个单独的网站吗？
我抱着试一试的心态向百度提交了一堆产品详情页地址，它提示我成功，但是目前没什么感觉。不过我还是不放心，想对这些动态路由进行预渲染，在github仓库里的issue找了很久，其中作者有直接回复 不支持动态路由预渲染，建议ssr 的，但是也不是完全没法子，作者还说可以把 所有动态路由都写出来配置下，这个 chrisvfritz/prerender-spa-plugin#375 回复我一开始没看懂，后来经过我3个小时的摸索，大概这样配置：
module.exports = {
configureWebpack: {
plugins: [
new PrerenderSPAPlugin({ // 预渲染
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: [
'/hot',
'/iot',
'/street-lighting',
'/traffic',
'/company',
'/login',
'/productDetail/20200501170342p8O',
'/productDetail/20200501165752p8O',
'/productDetail/20200501172222r8y',
'/productDetail/20200501172416r8y',
'/productDetail/20200501173238WLk',
'/productDetail/20200501173606WLk',
'/productDetail/20200501175355WLk',
'/productDetail/20200501191542aal',
'/productDetail/20200501192826r8y',
],
renderer: new PrerenderSPAPlugin.PuppeteerRenderer({
// Optional - defaults to 0, no limit.
// Routes are rendered asynchronously.
// Use this to limit the number of routes rendered in parallel.
maxConcurrentRoutes: 4,
// Optional - Wait to render until a certain amount of time has passed.
// NOT RECOMMENDED
renderAfterTime: 5000, // Wait 5 seconds. 时间设置短的话可能会报错，因为加载数据可能有延迟
// Other puppeteer options.
// (See here: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions)
headless: false // Display the browser window when rendering. Useful for debugging.
})
})
]
}
}这样确实生成了相应的html，不过这些页面好像并没有什么差别。
建议
如果是建网站要做SEO等等，还是建议直接 SSR 吧，我打算把我这个网站的国际站用SSR重写下，毕竟我这个站主要做外贸用的。而且我做的是响应式，但是写的不好，我还是将PC和移动分成两个项目来写吧
看到最后 放弃了这个插件，但是seo的优化还是要继续：
使用：vue-meta-info 这个库 来动态配置每个页面的tdk吧
下载：
代码语言：javascript复制npm i vue-meta-info -S然后在main.js中进行全局引用：
代码语言：javascript复制import MetaInfo from "vue-meta-info";
Vue.use(MetaInfo);完事直接在页面中调用:(跟data同级)
代码语言：javascript复制 metaInfo() {
return {
title: "留言板 | biaoBlog | 个人博客"
};
},文章里面需要动态设置：
代码语言：javascript复制 metaInfo() {
return {
title: this.bookInfo.title || "个人博客丨biaoBlog",
meta: [
{
name: "description",
content: this.bookInfo.summary
}
]
};
},值得注意的是，description和keyWord的设置 不是替换 而是在下面重新生成一个新的meta标签
所以不要发现。。页面最顶级的des和keywork没变 以为是bug 其实不是。。在下面还有des和keywork。。
心累的一天 忙碌了一天 效果很低。。杯水车薪
