1.安装
npm install prerender-spa-plugin --save
2.根目录新建vue.config.js
3.vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); // vue.config.js module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ staticDir: path.join(__dirname, 'dist'), routes: ['/', '/Second', '/Detail'], renderer: new Renderer({ inject: { foo: "bar" }, headless: false, renderAfterDocumentEvent: 'render-event' }) }) ] } } }
4.main.js
new Vue({ router, store, render: h => h(App), mounted() { document.dispatchEvent(new Event('render-event')) }, }).$mount('#app')
5.router.js
const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes })
6.运行npm run build
会有每个路由对应的文件夹,配置成功。