iT邦幫忙

1

Vue Cli (SPA)首次頁面白屏

  • 分享至 

  • xImage

最近用了vue的cli 做了個網頁放入伺服器上
連結網址後我的頁面沒有call api的component有出來
有call api的component卻沒顯示,直到按了首頁的按鈕才有顯示

這就是所謂的SSR嗎?

解決的辦法目前知道的是
Nuxt
還有
https://ithelp.ithome.com.tw/upload/images/20191120/20120722U7sihF9roF.png

是不是學習Nuxt後重寫會比較好?看大多都推Nuxt

froce iT邦大師 1 級 ‧ 2019-11-20 12:08:33 檢舉
你要不要先開你的console再來討論是不是ssr?
而且看樣子你根本不知道ssr幹嘛用的...
gior__ann iT邦新手 2 級 ‧ 2019-11-20 13:45:43 檢舉
抱歉~因為資料都是打api要來的
確實我也不了解ssr,只有字面上的了解,所以才會認為是ssr
因為這是第一次用vue_cli來做網頁
所以很多東西我也不清楚,很抱歉
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
dragonH
iT邦超人 5 級 ‧ 2019-11-20 12:00:33
最佳解答

請貼上你的 code

要看你的 code 才知道問題在哪

或者看你的 console 有無 error

連結網址後我的頁面沒有call api的component有出來
但有call api的component卻沒顯示,直到按了首頁的按鈕才有顯示

基本上 Nuxt 也不會是為了解決你這問題而存在的

我認為問題應該在你的 code

看更多先前的回應...收起先前的回應...
gior__ann iT邦新手 2 級 ‧ 2019-11-20 13:20:59 檢舉

https://ithelp.ithome.com.tw/upload/images/20191120/20120722PhrZy9lAh0.png

這是console的資訊~但我看好像是font-icon不至於Home.vue出不來(下面黑黑的一塊)
按下首頁的按鈕後才有call api
https://ithelp.ithome.com.tw/upload/images/20191120/20120722CaqgiuH7kF.jpg

我的api呼叫是寫在home.vue的mounted中,code因為是公司項目不是我自己做的練習,所以我才沒有貼上來@@

至於Nuxt我也沒碰過,只是剛好聽過人家講是用來處理
(SSR) Server-Side Rendering
所以才會覺得是不是因為這樣

如果問了白痴問題請見諒,謝謝~

dragonH iT邦超人 5 級 ‧ 2019-11-20 13:42:53 檢舉

gior__ann

至於Nuxt我也沒碰過,只是剛好聽過人家講是用來處理
(SSR) Server-Side Rendering

基本上如果你不知道 Nuxt 在做什麼

或者沒用過 SSR

那可以不用理他

他也不會影響到你一般 vue project 的開發

只是在某些情況

用 SSR 會比較適合而已

這是console的資訊~但我看好像是font-icon不至於Home.vue出不來(下面黑黑的一塊)

沒錯 不會影響

按下首頁的按鈕後才有call api

所以你的 home 有什麼 render 條件在嗎

e.g.

api 拿回來的資料存在 data

然後

v-if = "data.length" 之類的

gior__ann iT邦新手 2 級 ‧ 2019-11-20 14:01:45 檢舉

至於Nuxt我也沒碰過,只是剛好聽過人家講是用來處理
(SSR) Server-Side Rendering

基本上如果你不知道 Nuxt 在做什麼

或者沒用過 SSR

那可以不用理他

他也不會影響到你一般 vue project 的開發

只是在某些情況

用 SSR 會比較適合而已

了解,謝謝~

不過我並沒有下類似這樣的條件去阻止整頁的渲染
目前另外一個可能不知道是不是~

因為我的頁面是透過其他頁面導過來並夾帶傳遞的訊息
https://ithelp.ithome.com.tw/upload/images/20191120/201207220jCrjgmtxN.png
但我點了首頁後網址列有變化,就只剩前面的網域,這時home.vue就有出來了
https://ithelp.ithome.com.tw/upload/images/20191120/20120722aEDcq50GMT.png

然後我router是這樣設
https://ithelp.ithome.com.tw/upload/images/20191120/20120722akH1hX5vM0.png

會是這個問題嗎?

dragonH iT邦超人 5 級 ‧ 2019-11-20 14:11:14 檢舉

因為我的頁面是透過其他頁面導過來並夾帶傳遞的訊息

gior__ann

如果你指的是那個 token 的話

他應該是不會影響你的 router 的

你的 router 看起來也沒啥問題

不對

你的 router 的寫法

本來就是 http://xxxx.com.tw/ 才會顯示

可是看你有問題的那張圖

中間好像還插了 static ?

最簡單的

直接在你的 home.vuecreated

加上

console.log('Home rendered')

看看無法顯示時

這行會不會出來

gior__ann iT邦新手 2 級 ‧ 2019-11-20 15:11:18 檢舉

console.log('Home rendered')一開始沒出來 QQ
一樣是到點了首頁才有
然後
是不是該朝 vue-cli3預渲染處理 這個方向呢?

dragonH iT邦超人 5 級 ‧ 2019-11-20 15:16:29 檢舉

gior__ann

是不是該朝 vue-cli3預渲染處理 這個方向呢?

不是

你先把

首頁的 url

home render 成功時的 url

home render 失敗時的 url

分別列出來

或許答案就出來了

gior__ann iT邦新手 2 級 ‧ 2019-11-20 15:51:18 檢舉

OK 我再想想 也再檢查看看
感謝不吝嗇又耐心的指導/images/emoticon/emoticon41.gif

dragonH iT邦超人 5 級 ‧ 2019-11-20 16:00:37 檢舉

/images/emoticon/emoticon12.gif

0
阿展展展
iT邦好手 1 級 ‧ 2019-11-20 12:15:35

你的專案上 server之後 頁面就不見了

那在本機的環境執行是沒有問題的嗎?

nuxt 是 vue 的延伸 但是...你是做什麼專案需要用到兩種架構 cli + nuxt
/images/emoticon/emoticon19.gif

gior__ann iT邦新手 2 級 ‧ 2019-11-20 13:28:46 檢舉

抱歉~表達不夠明確
我是想問是不是學習nuxt,用nuxt來重寫,不是cli + nuxt @@
才不會有這種狀況
Nuxt還沒碰過,只是剛好聽到,所以如果對Nuxt的功能有誤解,抱歉

我自己本機環境是ok的
是放到server之後才看到我router-view的home.vue沒被渲染出來
要點擊首頁按鈕才有

gior__ann iT邦新手 2 級 ‧ 2019-11-20 13:38:09 檢舉

抱歉~因為資料都是打api要來的
確實我也不了解ssr,只有字面上的了解,所以才會認為是ssr

因為這是第一次用vue_cli來做網頁
所以很多東西我也不清楚,很抱歉

我要發表回答

立即登入回答