预渲染插件prerender-spa-plugin使用说明
该插件是将路由打包成单个静态文件，适用于简单页面
1.初始化VUE项目2.x 3.x 都可，需要集成cue-router，并且只支持history模式
2.安装依赖
yarn add prerender-spa-plugin -D
或
npm install prerender-spa-plugin -D
3.修改vue.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path')
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const config = require('./config.js')
console.log(path.join(__dirname, './'))
module.exports = {
productionSourceMap: false,
configureWebpack: () => {
if (!IS_PROD) return
return {
plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, 'dist'), // 读取vue-cli已打包文件的根目录 prerender-spa-plugin会在这里开启一个服务
routes: config.routes, // 哪些路由页面需要预渲染
minify: {
minifyCSS: true, // css压缩
removeComments: true // 移除注释
},
renderer: new Renderer({
inject: {
foo: 'bar'
},
navigationOptions: {
timeout: 0,
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上
renderAfterDocumentEvent: 'render-event',
args: ['--no-sandbox', '--disable-setuid-sandbox']
})
})
]
}
}
}
4根目录下.增加config.js 路由配置文件
module.exports = {
// 需要预渲染的路由地址
routes: [
'/',
'/about'
]
}
5.修改main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App).use(router)
router.isReady().then(() => {
app.mount("#app")
setTimeout(() => {
document.dispatchEvent(new Event("render-event"))
}, 1000)
})
\
