vue-ssr介绍：vue-ssr介绍

用官方的方法安装配置ssr要死人的，一大堆东西都要手动配置…

但是prerender-spa-plugin不如手动配置好，缺点明显

首先已经安装好vue-cli，在vue-cli脚手架基础上安装的

安装prerender-spa-plugin

prerender-spa-plugin：prerender-spa-plugin

然后开始安装prerender-spa-plugin

npm install prerender-spa-plugin -D

配置webpack.config

配置build/webpack.prod.conf.js

//引入
const PrerenderSpaPlugin = require('prerender-spa-plugin')

plugins: {
    //....
    //配置 prerender-spa-plugin
    new PrerenderSpaPlugin(
        // 生成文件的路径，此处与webpack打包地址一致，config.build.assetsRoot为vue cli生成的配置，打包后的文件地址
        path.join(config.build.assetsRoot), 
        // 配置要做预渲染的路由，只支持h5 history方式
        [ '/', ]
    )

    //....
}

编译

执行npm

npm run build

生成的文件，没什么变化，跟以前一样，只是html内容变了

打开index.html

这个页面是我最近在写的一个node项目，现在打算用vue改写一下前端

index.html源代码内容

vue-ssr只能h5 history的路由模式，不可以#///

这个prerender-spa-plugin只是相当于预渲染的快照页面，不适合频繁变动的页面，就好比如织梦cms系统那种，生成一大堆静态页面

但是seo没问题