vue项目预渲染插件Prerender SPA Plugin,vue-meta-info的使用

下面介绍如何使用Vue官方推荐的Prerender SPA Plugin插件做预渲染

版本

vue-cli:4.54
vue:2.6.11
prerender-spa-plugin:3.4.0
vue-meta-info:0.1.7

目的

    因为常规Vue项目采用的是客户端渲染(CRS)，内容是在客户端通过JavaScript生成DOM插入HTML中，对SEO(Search Engine Optimization | 搜索引擎优化)不友好。所以对于这个问题我们可以采用预渲染，服务端渲染(SSR)的方式来解决这个问题。
    笔者在本篇只讨论预渲染，关于服务端渲染可以了解基于Vue的NuxtJs框架，或者基于React的NextJs框架。笔者在后续的文章中也会介绍关于这方面的内容。

使用

1. 输入npm install prerender-spa-plugin --save-dev 安装 Prerender SPA Plugin插件
   注意点：由于此插件基于Puppeteer，在安装过程中会下载chromium。如果下载过程过慢可以尝试切换到npm淘宝源或者使用cnpm安装。
2. 如果需要配置预渲染页面的meta请输入npm install vue-meta-info --save安装vue-meta-info
3. 安装成功后打开项目根目录的vue.config.js文件编辑相关配置项

//prerender-spa-plugin基本用法
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const path = require('path');
~~
module.exports = {
~~
	configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    staticDir: path.join(__dirname,'dist'),
                    //routes中的内容为预渲染页面的路由path
                    routes: ['/profile'],
                }),
            ],
        };
    }
~~
}

如果需要借助vue-meta-info设置预渲染页面的meta(配置相对简易)
1.打开相应**.vue文件

export default {
	metaInfo:{
		title:'profile page'
	},
}

最后输入打包命令npm run build打包完成后打开dist文件夹即可看到根目录中包含了profile文件夹和其内的预渲染文件index.html至此便成功借助Prerender SPA Plugin完成vue页面预渲染。

结语：此插件适用于不频繁变动的页面。如果需要更多高级配置及用法可查阅官方文档Prerender SPA Plugin