vue-cli+vue-ssr通过prerender-spa-plugin插件配置

2018-11-29 21:18   Tags:

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

vue-cli+vue-ssr通过prerender-spa-plugin插件配置

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

vue-cli+vue-ssr通过prerender-spa-plugin插件配置

打开index.html

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

vue-cli+vue-ssr通过prerender-spa-plugin插件配置

index.html源代码内容

vue-cli+vue-ssr通过prerender-spa-plugin插件配置

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

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

但是seo没问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注