vue+prerender-spa-plugin预渲染简单示例

prerender-spa-plugin 作者github

突发奇想，想百度百度 公司官网，没有被收录，只有招聘信息，想想看，除了没有向百度提交外，也有可能是vue没有预渲染的原因。

先安装插件 

cnpm install prerender-spa-plugin --save

./build/webpack.prod.conf.js 中

var PrerenderSpaPlugin = require('prerender-spa-plugin')

var webpackConfig = merge(baseWebpackConfig, {

    ......

    plugins: [

    ......

        new PrerenderSpaPlugin(

              path.join(__dirname, '../dist'),

            ['/','/About','/Product/5','/Contact','/Recruit']

    ）,

    ......

    ]

    .......

}

config文件夹下index.js中

assetsPublicPath: '/'

改为

assetsPublicPath: './'

如果是放在服务的二级目录下

config文件夹下index.js中

assetsPublicPath: '/'

改为

assetsPublicPath: '/二级目录名/'

同时如果 vue-router 用的mode:'history'，那么router中的  path路径也要加上 '/二级目录名/' ，可以设置base，例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"。

会报webpackJsonp is not defined错误  公共的文件必须首先被引入进来 ，改成这样：

script type="text/javascript"  src="/static/js/manifest.2d1c71f2ac9abb1a45c7.js"

script type="text/javascript"  src="/static/js/vendor.9828923e4621fc48a032.js"

script type="text/javascript"  src="/static/js/app.97e0ce43521cf0c0702b.js"

script type="text/javascript"  src="/static/js/0.4722f5e9435d3e32536a.js"