溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

在vue-cli3中用預(yù)渲染遇到一些問題

發(fā)布時(shí)間：2020-08-01 10:39:10 來源：億速云 閱讀：179 作者：小豬 欄目：web開發(fā)

小編這次要給大家分享的是在vue-cli3中用預(yù)渲染遇到一些問題，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

前言

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

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

問題及解決方案

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

Unable to prerender all routes!

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

解決方案：

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

在vue-cli3中用預(yù)渲染遇到一些問題

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

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

This relative module was not found:

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

解決方案：

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

具體就是：

# 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è)問題是最神奇的，按照他說的來說，就是不能渲染所有的路由，但我目前也就只有五個(gè)路由在配置里面，然后我減到兩個(gè)路由還是報(bào)這個(gè)錯(cuò)，所以肯定不是路由的原因。按照github上的方案改寫了之后，好像就好了。然后當(dāng)時(shí)我就盡想著先編譯成功再說，但等我回過頭來，想再復(fù)現(xiàn)出來研究一下的時(shí)候，怎么都復(fù)現(xiàn)不出來...🤷‍♀️
當(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í)顯示瀏覽器窗口。對調(diào)試很有用。 
       //等待渲染，直到檢測到指定元素。
       //例如，在項(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'), // 可以用懶加載
}]

看完這篇關(guān)于在vue-cli3中用預(yù)渲染遇到一些問題的文章，如果覺得文章內(nèi)容寫得不錯(cuò)的話，可以把它分享出去給更多人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手