快捷導(dǎo)航

談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑

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

這篇文章主要介紹了談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

本來(lái)以為把插件一裝，配置一配，咔咔咔就能搞定，結(jié)果發(fā)現(xiàn)并沒有想的那么簡(jiǎn)單。因?yàn)槭紫染陀龅搅藘蓚€(gè)報(bào)錯(cuò)，折騰了半個(gè)晚上。

問(wèn)題及解決方案

第一個(gè)報(bào)錯(cuò)：

Unable to prerender all routes!

這個(gè)問(wèn)題是在設(shè)置好配置之后，build的時(shí)候報(bào)出來(lái)的。主要癥狀就是打開了瀏覽器后卡主不動(dòng)，然后就強(qiáng)制退出了。

解決方案：

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

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

第二個(gè)報(bào)錯(cuò)：

This relative module was not found:

這個(gè)報(bào)錯(cuò)也是編譯的時(shí)候出現(xiàn)的。

解決方案：

routes里的前兩個(gè)路由不要用懶加載的方式來(lái)寫...🤷‍♀️

具體就是：

# 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'), // 可以用懶加載
 },

爬坑歷程

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

附上完整配置

# 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-輸出應(yīng)用程序的路徑預(yù)渲染。
      staticDir: path.join(__dirname, './dist/fontend'),
      //必需，要渲染的路線。 
      routes: ['/', '/Pg1', '/Pg2', '/Pg3', '/Pg4'],
      //必須，要使用的實(shí)際渲染器，沒有則不能預(yù)編譯 
     
      renderer: new Renderer({
       inject: {
        foo: 'bar'
       },
       headless: false, //渲染時(shí)顯示瀏覽器窗口。對(duì)調(diào)試很有用。 
       //等待渲染，直到檢測(cè)到指定元素。
       //例如，在項(xiàng)目入口使用`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預(yù)渲染 https://www.jianshu.com/p/813c21899540
[2] Unable to prerender all routes! https://github.com/chrisvfritz/prerender-spa-plugin/issues/196

到此這篇關(guān)于談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑的文章就介紹到這了,更多相關(guān)vue-cli3 預(yù)渲染內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: