1.安装prerender-spa-plugin
npm install prerender-spa-plugin --save
2.添加配置文件vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: () => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'),
routes: ['/', '/routerPath'], //这里添加需要静态化routes的path
renderer: new Renderer({
inject: {
foo: "bar"
},
headless: false,
renderAfterDocumentEvent: 'render-event'
})
})
]
}
}
}
3.src/main.js
new Vue({
router,
store,
render: h => h(App),
mounted() { //新增方法
document.dispatchEvent(new Event('render-event'))
},
}).$mount('#app')
4.router/index.js
...
const router = new VueRouter({
mode: 'history', //需要开启历史模式,不支持#模式
base: process.env.BASE_URL,
routes
})
...
5.运行npm run build