Vue-cli使用prerender-spa-plugin插件預渲染和配置cdn

參考：https://www.jianshu.com/p/6a4c0b281e7f

使用vue-cli打包項目一般為spa項目，眾所周知單頁面應用不利於SEO，有ssr和預渲染兩種解決方案，這里我們只討論預渲染。

此教程使用的prerender-spa-plugin版本和vue版本

vue-cli有2.0和3.0版本，解決方法是不一樣的，這里我們要分開討論。

vue-cli3.0版本

3.0的cli看上去簡潔多了，去掉了2.0 build和config等目錄，那我們怎么去修改webpack的配置呢？
在根目錄下創建vue.config.js，進行你的配置。

1.安裝

 cnpm 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: 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' }) }), ], }; } } 

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 用IDE打開，看文件內容里是否有該文件應該有的內容。有的話，就設置成功了，如果沒成功，照着上面的步驟再來一次！！！

vue-cli2.0版本
1.安裝

 cnpm install prerender-spa-plugin --save

2.webpack.prod.conf.js增加部分代碼

const path = require('path') const PrerenderSPAPlugin = require('prerender-spa-plugin') //引用插件 const Renderer = PrerenderSPAPlugin.PuppeteerRenderer const webpackConfig = merge(baseWebpackConfig, { plugins: [ // vue-cli生成的配置中就已有這個了，不要動 new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency' }), // 配置PrerenderSPAPlugin new PrerenderSPAPlugin({ // 生成文件的路徑，也可以與webpakc打包的一致。 staticDir: path.join(__dirname, '../dist'), // 對應自己的路由文件，比如index有參數，就需要寫成 /index/param1。 routes: ['/', '/product','/about','/contact','/join','/jzjh'], // 這個很重要，如果沒有配置這段，也不會進行預編譯 renderer: new Renderer({ inject: { foo: 'bar' }, headless: false, // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。 renderAfterDocumentEvent: 'render-event' }) }) ] }) 

3.在main.js中增加

new Vue({ el: '#app', router, render: h => h(App), mounted () { document.dispatchEvent(new Event('render-event')) } }) 

4.router.js 中設置mode: “history”

5.運行npm run build，看一下生成的 dist 的目錄里是不是有每個路由名稱對應的文件夾。然后找個 目錄里 的 index.html 用IDE打開，看文件內容里是否有該文件應該有的內容。有的話，就設置成功了，如果沒成功，照着上面的步驟再來一次！！！

特別提醒

1.vue-cli2.0和3.0的設置大致一致，但有一個很不同
在3.0中，設置staticDir: path.join(__dirname,'dist'),
在2.0中，設置staticDir: path.join(__dirname,'../dist'),
如果你把3.0的staticDir設置為path.join(__dirname,'../dist')或者把2.0的staticDir設置為path.join(__dirname,'dist')，運行npm run build 都會報錯，這要特別注意！！！

2.細心的小伙伴會發現，不管2.0還是3.0都需要設置 history 模式，那這一步是否是必須的呢？經過測試，如果不設置history模式，其實也能運行和生成文件的，但查看每個index.html文件的內容都會是一樣的。所以這一步是必須的

如果你想修改每個頁面的meta 信息，這里推薦使用 vue-meta

如何再靜態生成的如：indexl.html的html文件圖片等使用我們配置的cdn環境呢？

1.src目錄下增加文件public-path.js

/**
 * CDN
 */

const isPrerender = window.__PRERENDER_INJECTED__ === 'prerender'

__webpack_public_path__ = isPrerender ? '' : process.env.CDN_PATH

2.main.js引入public-path.js,注意要在最開頭的地方添加

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import './public-path'
import Vue from 'vue'
import App from './App'
import router from './router'
import VueMeta from 'vue-meta'
import $ from 'jquery'
import 'babel-polyfill'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import 'swiper/dist/css/swiper.css';
Vue.config.productionTip = false
Vue.use(VueMeta)
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  mounted() {
    document.dispatchEvent(new Event('render-event'))
  }
})

 

3.修改webpack.pro.conf.js文件

// 配置PrerenderSPAPlugin
    new PrerenderSPAPlugin({
      staticDir: config.build.assetsRoot,
      routes: [ '/' ],
      outputDir: path.join(config.build.assetsRoot, config.build.assetsPublicPath),
      indexPath: path.join(config.build.assetsRoot, 'index.html'),
      postProcess (renderedRoute) { // add CDN
        let cdnPath = JSON.parse(env.CDN_PATH);
        renderedRoute.html = renderedRoute.html.replace(
          /(<script[^<>]*src=\")((?!http|https)[^<>\"]*)(\"[^<>]*>[^<>]*<\/script>)/ig,
         `$1${cdnPath}$2$3`
        ).replace(
          /(<link[^<>]*href=\")((?!http|https)[^<>\"]*)(\"[^<>]*>)/ig,
         `$1${cdnPath}$2$3`
        ).replace(/(<img[^<>]*src=\")((?!http|https|data:image)[^<>\"]*)(\"[^<>]*>)/ig,
        `$1${cdnPath}$2$3`)

        return renderedRoute },

      renderer: new Renderer({
        injectProperty: '__PRERENDER_INJECTED__', inject: 'prerender',
        renderAfterDocumentEvent: 'render-event',
      })
    }),

注意紅色字體的，把相對路徑的img和js加上我們的cdn路徑