网上很多都是关于prerender-spa-plugin插件的介绍,但是听说这个插件官方很久没维护了,本地安装时也出现了很多问题,经过一番查找,发现了prerender-spa-plugin-next插件,测试发现,这个插件在vuecli5中完美使用,在vuecli4中使用会报错。
安装 prerender-spa-plugin-next
npm i prerender-spa-plugin-next -D
vue.config.js中配置:

- // vue.config.js
- const { defineConfig } = require('@vue/cli-service');
-
- // 预渲染
- const PrerenderSPAPlugin = require('prerender-spa-plugin-next');
-
- module.exports = defineConfig({
- transpileDependencies: true,
- // prerender-spa-plugin-next预渲染
- configureWebpack: {
- plugins: [
- new PrerenderSPAPlugin({
- // 需要预渲染的页面,跟router路由一致
- routes: [ '/', '/about' ],
- })
- ]
- }
-
- })
可以给每个预渲染的页面设置title,meta和link信息,详见:vue2中seo时使用vue-meta-info_李疆~的博客-CSDN博客假设你要给users.vue添加title,meta标签。main.js里面引入vue-meta-info。安装vue-meta-info。这样在组件页面中就可以使用了。https://blog.csdn.net/qq_40323256/article/details/127605922