這篇文章主要介紹了Vue中如何進(jìn)行網(wǎng)頁預(yù)渲染，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司是專業(yè)的阜平網(wǎng)站建設(shè)公司，阜平接單;提供網(wǎng)站建設(shè)、做網(wǎng)站,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行阜平網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!
通常情況下，Vue項目是單頁項目，也就是渲染出來的項目，只有一個index.html。
這樣的缺點很明顯：
部署到Nginx，需要做try_files $uri $uri/ /index.html內(nèi)部重定向，才可以用通過路由訪問頁面。
SEO不友好，搜索引擎收錄效果不佳。
而預(yù)渲染，就是把原來的單index.html，渲染成多個目錄，每個目錄又有一個index.html。這樣就不需要內(nèi)部重定向訪問路由，也更利于搜索引擎收錄。
本次預(yù)渲染使用prerender-spa-plugin進(jìn)行預(yù)渲染。
它的主要原理是啟動瀏覽器，渲染完成后抓取HTML，然后再創(chuàng)建目錄，保存為index.html。
注意：
官網(wǎng)目前只有Vue2.x的Demo，實際上是支持Vue3的（本次演示也是使用Vue3）
雖然最近的一個發(fā)布版本是2018年（最近應(yīng)該會發(fā)布新版本），但是一直有維護(hù)，可以使用。
安裝
首先，我們用npm進(jìn)行安裝：
npm i prerender-spa-plugin
需要注意，因為
prerender-spa-plugin會安裝一個Chromium，所以安裝會比較久。
當(dāng)然，這種依賴，只有在打包時候才使用。所以，更好的安裝方式，應(yīng)該是：
npm i prerender-spa-plugin -D
現(xiàn)在，我們就來項目引用，使用方法很簡單，方便在兩個地方追加：
App.vue
vue.config.js
App.vue
首先，我們在App.vue內(nèi)追加觸發(fā)器事件：
重慶分公司
重慶分公司
mounted() {
document.dispatchEvent(new Event('render-event'))
}添加這個觸發(fā)器，是后續(xù)打包時候，會自動觸發(fā)，并完成渲染。
vue.config.js
根據(jù)prerender-spa-plugin項目文檔：
const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
module.exports = {
plugins: [
...
new PrerenderSPAPlugin({
// Required - The path to the webpack-outputted app to prerender.
staticDir: path.join(__dirname, 'dist'),
// Required - Routes to render.
routes: [ '/', '/about', '/some/deep/nested/route' ],
})
]
}同時一些高級使用需要引入PuppeteerRenderer進(jìn)行自定義。所以，我自己的vue.config.js配置：
module.exports = {
……
chainWebpack: config => {
if (process.env.NODE_ENV == "development") {
……
}
if (process.env.NODE_ENV == "production") {
config.plugin("PrerenderSPAPlugin").use('prerender-spa-plugin', [
{
staticDir: path.join(__dirname, 'dist'),
routes: [
'/', '/processIMG', '/statisticsChars', '/generatePWD', '/calculateTheDate',
'/randomNumber', '/textBase64', '/curl', '/mcstatus',
'/gh', '/about', '/mdv'
],
renderer: new PuppeteerRenderer({
headless: false,
executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
// 對應(yīng)App.vue
renderAfterDocumentEvent: 'render-event',
}),
}])
])
}
}我使用的是鏈?zhǔn)胶瘮?shù)。這樣的好處，是方便我進(jìn)行if-else等函數(shù)式判斷。
其中，renderer屬性：
headless：這個就是Chrome的headless屬性，常用于Debug。更多可以參考：Google Chrome
executablePath：重定向瀏覽器地址；我這里重定向使用我電腦自帶的Chrome瀏覽器了。（可選，可以直接不加，默認(rèn)調(diào)用Chromium）
renderAfterDocumentEvent：需要同App.vue中 document.dispatchEvent(new Event('render-event'))的事件名稱要對應(yīng)上。
而routes數(shù)組，里面就是需要預(yù)渲染的路由地址。
當(dāng)然，更多的可選參數(shù)，你也可以參考官方的文檔：
staticDir需要指向編譯后的輸出文件夾。
之后，我們就可以打包項目了：
npm run build
打包后的效果：
看看預(yù)渲染的頁面：
因為我有使用Vue-meta的組件，所以預(yù)渲染的文件也就有meta屬性了。
如果你也想用Vue-meta組件配合
prerender-spa-plugin，可以參考文章：https://juejin.cn/post/7056972997894094861
需要注意，如果出現(xiàn)什么錯誤，可以嘗試：
# 刪除項目node_modules rm -rf node_modules # 重新安裝 npm install
這樣的文件，就可以進(jìn)行部署了。
我們使用Nginx進(jìn)行部署，上次到Nginx Web文件夾內(nèi)，修改config文件，就不需要：
location / {
try_files $uri $uri/ /index.html;
}來實現(xiàn)內(nèi)部重定向了。因為有真實的目錄，可以去掉。
但是，數(shù)據(jù)代理，最好使用Nginx來實現(xiàn)。比如，開發(fā)環(huán)境，數(shù)據(jù)代理：
config.devServer.proxy({
'/dataApiJava': {
target: JavaBaseURL,
pathRewrite: {'^/dataApiJava': ""},
ws: true,
changeOrigin: true
},
'/dataApiPython': {
target: PythonBaseURL,
pathRewrite: {'^/dataApiPython': ""},
ws: true,
changeOrigin: true
},
'/ghs': {
target: GithubSpeedURL,
pathRewrite: {'^/ghs': ""},
ws: true,
changeOrigin: true
}
}
)對應(yīng)的Nginx配置，可以這樣寫：
location /dataApiPython/{
proxy_pass http://127.0.0.1:8099/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header REMOTE-HOST $remote_addr;
add_header X-Cache $upstream_cache_status;
}
location /dataApiJava/ {
proxy_ssl_server_name on;
proxy_pass https://…….cn/;
}
location /ghs/ {
proxy_ssl_server_name on;
proxy_pass https://……/gh/;
}給大家展示三種配置，按需設(shè)置哦。
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中如何進(jìn)行網(wǎng)頁預(yù)渲染”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!
