vue 預渲染遇到的坑

最近公司專案需要增加seo搜尋引擎優化，到網上找了下資料，有預渲染和服務端渲染兩種方式，考慮到只需要渲染首頁所以我選擇了先啟用比較簡單的預渲染方式來做seo！

1、安裝 prerender-spa-plugin，使用**映象安裝 cnpm

cnpm install   prerender-spa-plugin -d

const router = new

router()

build: }}

},//這個很重要，如果沒有配置這段，也不會進行預編譯
renderer: new
renderer()
}),...
]

...

newvue(
})

npm run build

下面我補充一下：

安裝乙個http server外掛程式，可以直接執行dist資料夾下的index.html類似於直接把打包檔案在伺服器端部署執行了

1.安裝 http server

全域性安裝

2、進入到dist目錄

cd dist

hs -o -p 9999  //

自動啟動本地dist目錄下的index.html
//瀏覽器啟動 127.0.0.1:9999

但是。。。。

有幾個坑我這裡必須記錄下：

1、history模式下，修改nginx配置，不然頁面重新整理會報404

#配置nginx動靜分離，定義的靜態頁面直接從nginx發布目錄讀取。

location /
#對應上面的@router，主要原因是路由的路徑資源並不是乙個真實的路徑，所以無法找到具體的檔案
#因此需要rewrite到index.html中，然後交給路由在處理請求資源
location @router 

在vue單頁面應用中，我們大概都會使用commonschunkplugin這個外掛程式。 傳送門 commonschunkplugin

但是在專案經過本地測試沒有任何問題，打包上線後卻會報錯 webpackjsonp is not defined。這是因為公共檔案必須在自己引用的js檔案之前引用。

找到build→webpack.prod.conf.js→找到htmlwebpackplugin外掛程式，新增如下配置即可

我是手動修改檔案引用的順序的：

這樣配置後真的不會報 webpackjsonp is not defined

3、還有第三個問題目前我還在思考中，就是我的首頁做了登入攔截，使用者沒登入則路由跳轉之前被攔截到登入頁面，

加了這個pemmision.js到main.js入口檔案後，我發現預渲打包後的dist目錄只有 login, static, index.html 三個檔案，

而我預渲染的是三個頁面

但是如果我刪掉登入攔截的js後，就可以生成  index, login, static, index.html 四個檔案了，而且index.html 是包含了首頁內容的檔案，

目前我還沒搞清楚為什麼會這樣，這個先做記錄後續知道了原因再來更新。。。

vue2 0使用預渲染

檔案目錄如下 執行後如下圖 首頁的網路請求只有乙個，沒有對應的文字和元件，不利於seo 1.router的模式必須是history 2.核心外掛程式 npm install prerender spa plugin d 3.在build webpack.prod.conf.js內部引入渲染器 con...

vue中遇到的坑

1 乙個是eventhub的坑 重複監聽的問題 解決方案監聽之前先off掉 2 路由的坑 不加replace會兩個頁面來回跳，無法正常的返回父級頁面。3 vuejs對data中陣列的原生方法進行了封裝，所以在改變陣列時能夠觸發檢視更新，但是以下兩種情況是無法觸發檢視的更新的 1 通過索引直接修改陣列...

vue實戰中遇到的 坑

也可能是因為接觸vue時間也不長，經常落入不知名的 坑 中，對於我這個菜鳥來說，每次 落坑 無疑是一場不小的災難。前兩天有個朋友在問我，在使用vue中有沒有遇到一些很難解決的問題，一下我也只能說出一兩個，正所謂 光說不練，假把式 所以索性就抽時間總結一下我在專案中遇到的vue的問題，也貼出了效果，這...