⭐步骤:
1.安装 prerender-spa-plugin
命令为:npm install prerender-spa-plugin -D
2.把router里的mode模式改成history
2.找到build下的webpack.prod.conf.js
3.在头上写
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
4.在plugins里面添加
new PrerenderSPAPlugin({
// 生成文件的路径,这个目录只能有一级。若目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动
staticDir: path.join(__dirname, '../dist'),
// 对应自己的路由文件(数组形式哦!)
routes: [ '/', '/app', '/PackageOffer', '/proAllnetShow' ],
// 若没有这段则不会进行预编译
renderer: new Renderer({
// 触发渲染的时间,用于获取数据后再保存渲染结果
// renderAfterTime: 10000,
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
}),
5.在config下的index.js中 assetsPublicPath:'/'(这样样式会不见)
6.执行npm run build
ps: ™可是我还是遇到了报错
百度发现是没有puppeteer 微笑脸哦!
速速安装了npm install puppeteer
嗯哼 重新build ok (但是发现哦,出来的index.html里面的东西不能点击,嗯,下次再说这个问题)