資訊專欄INFORMATION COLUMN
摘要：眾所周知單頁面應(yīng)用不利于，為了解決這個問題網(wǎng)上所給出的個解決方案服務(wù)器端渲染預(yù)渲染由于頁面較少，且預(yù)渲染相對于比較簡單，于是選擇預(yù)渲染頁面，預(yù)渲染可以極大的提高網(wǎng)頁訪問速度。
眾所周知單頁面應(yīng)用不利于SEO，為了解決這個問題網(wǎng)上所給出的2個解決方案
**1、SSH服務(wù)器端渲染
2、預(yù)渲染**
由于頁面較少，且預(yù)渲染相對于SSH比較簡單，于是選擇預(yù)渲染頁面，預(yù)渲染可以極大的提高網(wǎng)頁訪問速度。而且配合一些meat插件，基本可以滿足SEO需求
下面就來簡單介紹一下
在webpack.
var PrerenderSpaPlugin = require("prerender-spa-plugin")
var webpackConfig = merge(baseWebpackConfig, {
plugins: [
//這段代碼意思是拷貝static文件至根目錄使得渲染的文件可以找到j(luò)s、css
new CopyWebpackPlugin([{
from: "static"
}]),
new PrerenderSpaPlugin(
//將渲染的文件放到dist目錄下
path.join(__dirname, "../dist"),
//需要預(yù)渲染的路由信息
[ "/","/introduct","/culture","/Chairman","/president","/fund","/news","/honor" ],
{
//在一定時間后再捕獲頁面信息，使得頁面數(shù)據(jù)信息加載完成
captureAfterTime: 50000,
//忽略打包錯誤
ignoreJSErrors: true,
phantomOptions: "--web-security=false",
maxAttempts: 10,
}
),
如果是一般不用跨域的網(wǎng)站到此已經(jīng)完成，然而api需要跨域的時候請求的數(shù)據(jù)全部都請求不到，所有的頁面都只有一個骨架，順便貼一下跨域
proxyTable: {
// proxy all requests starting with /api to jsonplaceholder
"/api": {
target: "http://192.26.26.xx/api",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
}
}
在打包之后跨域是不生效的，需要在nginx服務(wù)器做一個反向代理，
預(yù)渲染的時候請求全都是localhost:8080所以沒有數(shù)據(jù)信息
在網(wǎng)上查了半天也沒發(fā)現(xiàn)怎么解決
查看prerender-spa-plugin的代碼發(fā)現(xiàn)他是用的Hapi，找到插件下面的compile-to-html.js 文件發(fā)現(xiàn)下面這段代碼
Server.start(function (error) {
// If port is already bound, try again with another port
if (error) return serveAndPrerenderRoute()
var maxAttempts = options.maxAttempts || 5
var attemptsSoFar = 0
var phantomArguments = [
Path.join(__dirname, "phantom-page-render.js"),
"http://localhost:" + port + route,
JSON.stringify(options)
]
于是我突發(fā)奇想 將打包好的沒有數(shù)據(jù)的文件放到nginx服務(wù)器上，由于服務(wù)器是做過反向代理的所以可以請求到數(shù)據(jù)，于是我將 "http://localhost:" + port + route，直接改成了我服務(wù)器上的地址 "http://192.164.xx.xx" + route,，于是預(yù)渲染成功了有了數(shù)據(jù)信息，我這也算是另辟蹊徑了，不知道有沒有大神知道到底該怎么配置，我查邊文檔也沒有找到。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90450.html
摘要：預(yù)渲染構(gòu)建階段生成匹配預(yù)渲染路徑的文件注意每個需要預(yù)渲染的路由都有一個對應(yīng)的。使用安裝中引入代碼打包目錄模板頁面要預(yù)渲染的頁面路由默認掛在對象上，可以通過在預(yù)渲染頁面取值渲染時顯示瀏覽器窗口。 prerender-spa-plugin預(yù)渲染：構(gòu)建階段生成匹配預(yù)渲染路徑的 html 文件（注意：每個需要預(yù)渲染的路由都有一個對應(yīng)的html）。構(gòu)建出來的 html 文件已有部分內(nèi)容。 pre...
摘要：官方地址設(shè)置單頁面信息，如果需要單頁面，可以和形成更優(yōu)的配合單頁面應(yīng)用在前端正大放光彩。隨著單頁面應(yīng)用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發(fā)效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...
摘要：官方地址設(shè)置單頁面信息，如果需要單頁面，可以和形成更優(yōu)的配合單頁面應(yīng)用在前端正大放光彩。隨著單頁面應(yīng)用的普及，人們在感受其帶來的完美的用戶體驗，極強的開發(fā)效率的同時，也似乎不可避免的要去處理的需求。 vue-meta-info 官方地址： https://github.com/monkeyWang... （設(shè)置vue 單頁面meta info信息，如果需要單頁面SEO，可以和 prer...
摘要：好了，項目啟動了，目錄結(jié)構(gòu)也清楚了，接下來就是整個現(xiàn)有項目的遷移了目前正在改造項目，文章尚未寫完，會抽時間不定期的繼續(xù)更新項目的改造過程及分享改造過程中遇到的問題 公司項目，最初只為了實現(xiàn)前后端分離式開發(fā)，直接選擇了vue框架進行開發(fā)，然而現(xiàn)在項目基本完成了，發(fā)現(xiàn)蜘蛛根本就抓取不到網(wǎng)站數(shù)據(jù)，搜索引擎搜出來，都是一片空白沒有數(shù)據(jù)，需要對項目做SEO優(yōu)化。 本人第一次接觸SEO的優(yōu)化，完全...
摘要：在要改變的樣式前加二問題去掉項目路徑中的主要用到的模式。這里建議你直接看官網(wǎng)的，版本的和版本的不同。當瀏覽器窗口變小時，組件寬度不隨窗口響應(yīng)變小。這里我們需要沖突掉中的樣式，該值不能設(shè)置成可以改成小于即可。 一、樣式問題 1.vue中使用less 安裝less依賴 npm install less less-loader --save-dev 在使用時 在style標簽中加入 lang...
閱讀 1844·2021-11-11 16:54
閱讀 2070·2019-08-30 15:56
閱讀 2383·2019-08-30 15:44
閱讀 1311·2019-08-30 15:43
閱讀 1875·2019-08-30 11:07
閱讀 829·2019-08-29 17:11
閱讀 1480·2019-08-29 15:23
閱讀 3018·2019-08-29 13:01
