談談我在vue-cli3中用預渲染遇到的坑

更新時間：2020年04月22日 15:03:44 作者：麥麥麥造

這篇文章主要介紹了談談我在vue-cli3中用預渲染遇到的坑，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

前言

在開發(fā)自己的個人網站的時候后，選擇了用vue來開發(fā)，不可避免的遇到要對seo做優(yōu)化。鑒于目前頁面也不多，因此首先采用的是預渲染的方式。

本來以為把插件一裝，配置一配，咔咔咔就能搞定，結果發(fā)現(xiàn)并沒有想的那么簡單。因為首先就遇到了兩個報錯，折騰了半個晚上。

問題及解決方案

第一個報錯：

Unable to prerender all routes!

這個問題是在設置好配置之后，build的時候報出來的。主要癥狀就是打開了瀏覽器后卡主不動，然后就強制退出了。

解決方案：

參考了github上的issus https://github.com/chrisvfritz/prerender-spa-plugin/issues/196

很神奇的就好了！至于怎么神奇就后面再說👇

第二個報錯：

This relative module was not found:

這個報錯也是編譯的時候出現(xiàn)的。

解決方案：

routes里的前兩個路由不要用懶加載的方式來寫...🤷‍♀️

具體就是：

# vue.config.js
new PrerenderSPAPlugin({...
routes: ['/', '/pg1', '/pg2', '/pg3', '/pg4'],
...
# router/index.js
import Index from '../views/Index.vue'
import Pg1 from '../views/Pg1.vue'

const routes = [{
  path: '/',
  name: 'Index',
  component: Index, // 不要用懶加載
 },
 {
  path: '/pg1',
  name: 'Pg1',
  component: Pg1 // 不要用懶加載
 },
 {
  path: '/pg2',
  name: 'Pg2',
  component: () => import('../views/Pg2.vue'), // 可以用懶加載
 },

爬坑歷程

第一個問題是最神奇的，按照他說的來說，就是不能渲染所有的路由，但我目前也就只有五個路由在配置里面，然后我減到兩個路由還是報這個錯，所以肯定不是路由的原因。按照github上的方案改寫了之后，好像就好了。然后當時我就盡想著先編譯成功再說，但等我回過頭來，想再復現(xiàn)出來研究一下的時候，怎么都復現(xiàn)不出來...🤷‍♀️
當時時間也很晚了，沒辦法也就只好作罷了...

附上完整配置

# vue.config.js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
  configureWebpack: () => {
  if (process.env.NODE_ENV === 'production') {
   console.log(process.env.NODE_ENV)
   return {
    plugins: [
     new PrerenderSPAPlugin({
      //要求-給的WebPack-輸出應用程序的路徑預渲染。
      staticDir: path.join(__dirname, './dist/fontend'),
      //必需，要渲染的路線。 
      routes: ['/', '/Pg1', '/Pg2', '/Pg3', '/Pg4'],
      //必須，要使用的實際渲染器，沒有則不能預編譯 
     
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false, //渲染時顯示瀏覽器窗口。對調試很有用。 
       //等待渲染，直到檢測到指定元素。
       //例如，在項目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
       renderAfterDocumentEvent: "render-event",
       renderAfterTime: 5000
      })
     })
    ]
   }
  } else {
   return;
  }

# main.js
new Vue({

 router,
 render: h => h(App),
 mounted() {
  document.dispatchEvent(new Event('render-event')) # 新增此句
 }
}).$mount('#app')

# router/index.js
import Index from '../views/Index.vue'
import Pg1 from '../views/Pg1.vue'
const routes = [{
  path: '/',
  name: 'Index',
  component: Index, // 不要用懶加載
 },
 {
  path: '/Pg1',
  name: 'Pg1',
  component: Pg1 // 不要用懶加載
 },
 {
  path: '/Pg2',
  name: 'Pg2',
  component: () => import('../views/Pg2.vue'), // 可以用懶加載
 },
 {
  path: '/Pg3',
  name: 'Pg3',
  component: () => import('../views/Pg3.vue'), // 可以用懶加載
 },
 {
  path: '/Pg4',
  name: 'Pg4',
  component: () => import('../views/Pg4.vue'), // 可以用懶加載
}]

參考鏈接
[1] vue-cli3.0預渲染 https://www.jianshu.com/p/813c21899540
[2] Unable to prerender all routes! https://github.com/chrisvfritz/prerender-spa-plugin/issues/196

到此這篇關于談談我在vue-cli3中用預渲染遇到的坑的文章就介紹到這了,更多相關vue-cli3 預渲染內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: