1.核心插件
cnpm install prerender-spa-plugin --save-dev
2.vue-config.js中
const path = require('path'); const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; module.exports = { configureWebpack: config => { if (process.env.NODE_ENV === 'production') { // 为生产环境修改配置... return { plugins: [ // 预渲染配置 new PrerenderSPAPlugin({ //要求-给的WebPack-输出应用程序的路径预渲染。 staticDir: path.join(__dirname, 'dist'), //必需，要渲染的路线。
// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。 routes: ['/home','/login'], //必须，要使用的实际渲染器，没有则不能预编译 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, //渲染时显示浏览器窗口。对调试很有用。 //等待渲染，直到检测到指定元素。 //例如，在项目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` renderAfterDocumentEvent: 'render-event',
renderAfterTime: 5000 //renderAfer 多中条件选一个
}) }) ], } } else { // 为开发环境修改配置... return; } } }
3.在main.js中
new Vue({ router, store, render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) } }).$mount('#app')
4.router.js 中路由必须设置 mode: “history”模式 项目需要再站点根目录下
5.npm run build打包，生成的 dist 目录里有配置的每个路由名称对应的文件夹，里面的index.html有内容，就代表成功了。反之，请重新按步骤检查。