1.前言

由于公司需要把首頁(yè)進(jìn)行seo排名，但是首頁(yè)已經(jīng)完成好，并且還是hash模式，要做成seo排名，不能有hash模式的#，同時(shí)要能讀取到渲染好的頁(yè)面.所以，針對(duì)這2點(diǎn)困難，最終想到的解決方案是:

1. 先hash需要轉(zhuǎn)換為history，保證是無(wú)#的美觀模式;
2. 需要做到提前渲染好，可以采取vue的SSR，spa預(yù)渲染或nuxt.js.

2.選取渲染方式

首先，hash轉(zhuǎn)換為history已經(jīng)是板上釘釘?shù)氖虑椋@時(shí)候就開始找快捷簡(jiǎn)單改動(dòng)少的渲染方式，分別有vue的SSR，spa和nuxt.js.

• vue項(xiàng)目提供了ssr的方案.不過ssr方案需要在node上調(diào)用 renderToString 來渲染。如果不介意在系統(tǒng)結(jié)構(gòu)中增加一層 node 的話，就可以使用ssr的方式，這種方式會(huì)改變前后端交互的方式。ssr文檔.改動(dòng)中等
• spa預(yù)渲染，即使用prerender-spa-plugin插件預(yù)渲染.由于頁(yè)面較少，且預(yù)渲染相對(duì)于SSH比較簡(jiǎn)單，于是選擇預(yù)渲染頁(yè)面，預(yù)渲染可以極大的提高網(wǎng)頁(yè)訪問速度。而且配合一些meat插件，基本可以滿足SEO需求。改動(dòng)在三者中最小
• Nuxt就是基于Vue的一個(gè)應(yīng)用框架，采用服務(wù)端渲染，讓你的SPA應(yīng)用(Vue)也可以擁有SEO.官方文檔，但是由于需要重新改變底層框架，改動(dòng)在三者中最大.

綜上所述，選擇第二個(gè)方式，spa預(yù)渲染，改動(dòng)小，同時(shí)也能達(dá)到seo的要求

3.hash轉(zhuǎn)為history

1.模式修改 (目錄:src/router/index.js)

 // mode:'hash',
    mode: 'history',
    base: '/',

2.相對(duì)路徑調(diào)整

• 2.1 目錄:build/webpack.prod.conf.js

//history為"/",hash:'./'
//publicPath:'./',
publicPath:'/',

• 2.2目錄:config/index.js

// histroy模式:"/" ,hash模式:"./"
//assetsPublicPath: './',
assetsPublicPath: '/',

2.3 修改原因：

• ./ 是指用戶所在的當(dāng)前目錄（相對(duì)路徑）；
• / 是指根目錄（絕對(duì)路徑，項(xiàng)目根目錄），也就是項(xiàng)目根目錄；

對(duì)于hash模式，根路徑是固定的，就是項(xiàng)目的根目錄，但是history模式下，以/開頭的嵌套路徑會(huì)被當(dāng)作根路徑，所以使用“./”引入文件，就會(huì)找不到文件了，因?yàn)槲募旧砭褪窃陧?xiàng)目根目錄下的，并不在嵌套路徑這個(gè)目錄下。

總結(jié)，無(wú)論hash模式還是history模式，可以直接使用“/”從項(xiàng)目根目錄引入靜態(tài)文件。

3.服務(wù)端修改

nginx配置：參考官網(wǎng)教程

location / {
    proxy_pass http://127.0.0.1:80;
    root /usr/local/tomcat/tomcat_xhcf/webapps/ROOT; #表明路徑
    index index.html index.htm; 
    try_files $uri $uri/ /index.html; #交給index.html處理
    
}

原因：這樣修改，避免了刷新404的問題，因?yàn)槿绻鸘RL匹配不到任何靜態(tài)資源，就跳轉(zhuǎn)到默認(rèn)的index.html進(jìn)行處理。

4.SPA預(yù)渲染

1.安裝prerender-spa-plugin

npm i -s prerender-spa-plugin

或者 (淘寶鏡像)

cnpm i --save prerender-spa-plugin

2.配置

• 2.1目錄：build/webpack.prod.conf.js
• 在plugins列表里，加入下面代碼：

// 在vue-cli生成的文件的基礎(chǔ)上，只有下面這個(gè)才是我們要配置的
    new PrerenderSPAPlugin({
      // 生成文件的路徑，也可以與webpakc打包的一致。
      // 下面這句話非常重要?。?！
      // 這個(gè)目錄只能有一級(jí)，如果目錄層次大于一級(jí)，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)。
      staticDir: path.join(__dirname, '../dist'),

      // 對(duì)應(yīng)自己的路由文件，比如index有參數(shù)，就需要寫成 /index/param1。這里很重要，需要把自己想要生成靜態(tài)文件的路由全部寫進(jìn)去。
      routes: [
        '/',
        '/about',
        ],

      // 這個(gè)很重要，如果沒有配置這段，也不會(huì)進(jìn)行預(yù)編譯
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對(duì)應(yīng)上。
        renderAfterDocumentEvent: 'render-event',
        //時(shí)間
        renderAfterTime:5000
      })
    })

• 2.2目錄:src/main.js （mounted是新增代碼，對(duì)應(yīng)build/webpack.prod.conf.js里加的）

/* 記得要通過 router 配置參數(shù)注入路由，從而讓整個(gè)應(yīng)用都有路由功能*/
const app =new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',

  /* 這句非常重要，否則預(yù)渲染將不會(huì)啟動(dòng) */
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }

}).$mount('#app')

最終npm run build ，生成代碼，目錄如下即成功

dist
│    ├── about          
│           └── index.html           
│   
├── index.html      
└── static

5.全程操作概覽

• 修改完以上全部配置；
• 項(xiàng)目里npm run build生成文件，放入對(duì)應(yīng)服務(wù)器目錄；
• nginx重啟配置：

nginx -t #測(cè)試配置是否正確
nginx -s reload #重啟nginx配置

大功告成！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論