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有內容，就代表成功了。反之，請重新按步驟檢查。