1 vue-cli-plugin-prerender-spa

使用方法：

vue add prerender-spa

在安裝的過程中會需要安裝一個chrome，網速不好可能導致不能下載，導致安裝失敗，可以取消chrome的安裝，然後手動下載放在指定的目錄下；

安裝過程中選擇需要預渲染的route

安裝成功：

自動在main.js中加入：

2 使用prerender-spa-plugin外掛

cnpm i prerender-spa-plugin --save-dev vue-cli2.0 在build/webpack.prod.conf.js中：

const PrerenderSPAPlugin = require('prerender-spa-plugin') const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

註冊外掛：

在plugins中加入：

new PrerenderSPAPlugin({ staticDir: path.join(__dirname,'../dist'),//打包檔案的路徑，或者自定義一個檔案路徑 routes: ['/test','/'],//需要預渲染的route路徑 renderer: new Renderer({ inject: { foo: 'bar' },headless: true,renderAfterDocumentEvent: 'render-event'//需要在例項化Vue中監聽的事件，名稱要相對應 }) })

vue-cli3.0

在vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin'); const Renderer = PrerenderSPAPlugin.PuppeteerRenderer; const path = require('path'); module.exports = { configureWebpack: config => { if (process.env.NODE_ENV !== 'production') return; return { plugins: [ new PrerenderSPAPlugin({ // 生成檔案的路徑，也可以與webpakc打包的一致。 // 下面這句話非常重要！！！ // 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡著不動。 staticDir: path.join(__dirname,'dist'),// 對應自己的路由檔案，比如a有引數，就需要寫成 /a/param1。 routes: ['/','/product','/about'],// 這個很重要，如果沒有配置這段，也不會進行預編譯 renderer: new Renderer({ inject: { foo: 'bar' },headless: false,// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。 renderAfterDocumentEvent: 'render-event' }) }),],}; } }

在main.js中加入：

new Vue({ el: '#app',router,components: { App },template: '<App/>',mounted() { // You'll need this for renderAfterDocumentEvent. document.dispatchEvent(new Event('render-event')) } })

以上這篇vue-cli單頁面預渲染seo-prerender-spa-plugin操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。