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: [‘/‘,‘/fillIn‘],
//必须,要使用的实际渲染器,没有则不能预编译
renderer: new Renderer({
inject: {
foo: ‘bar‘
},
headless: false, //渲染时显示浏览器窗口。对调试很有用。
//等待渲染,直到检测到指定元素。
//例如,在项目入口使用`document.dispatchEvent(new Event(‘custom-render-trigger‘))`
renderAfterDocumentEvent: ‘render-event‘
})
})
],
}
} 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有内容,就代表成功了。反之,请重新按步骤检查。
原文地址:https://www.cnblogs.com/mrt-yyy/p/12672863.html
时间: 2024-08-30 13:57:17