• 完整代碼地址
  https://github.com/Kevin5979/WYmusic.git

本章主要填坑

IOS中無法進(jìn)行歌曲預(yù)加載

Player組件

• IOS中系統(tǒng)不會(huì)自動(dòng)加載歌曲,所以oncanplay永遠(yuǎn)不會(huì)執(zhí)行

• 解決方案：如何監(jiān)聽IOS中歌曲已經(jīng)準(zhǔn)備好了,通過ondurationchange事件來監(jiān)聽

• ondurationchange 當(dāng)歌曲加載完成后執(zhí)行

手機(jī)預(yù)覽項(xiàng)目沒有控制臺(tái)展示

main.js

• 解決方案：為了能在手機(jī)中調(diào)試項(xiàng)目，添加 vconsole 插件

import VConsole from 'vconsole'

const vconsole = new VConsole()
Vue.use(vconsole)

路徑的簡寫

vue.config.js

module.exports = {
  /* 部署應(yīng)用包的基本URL, 避免出現(xiàn)打包后項(xiàng)目找不到資源問題 */
  publicPath: './',
  configureWebpack: {
    //配置別名,默認(rèn)src為@,修改后需要重新編譯才能生效
    resolve: {
      alias: {
        'api': '@/api',
        'assets': '@/assets',
        'components': '@/components',
        'router': '@/router',
        'store': '@/store',
        'views': '@/views',
        'tools': '@/tools',
        'plugin': '@/plugin'
      }
    }
  }
}

保持頁面狀態(tài)驯镊，避免每次進(jìn)入頁面都需要加載一次暗膜，優(yōu)化性能

App.vue

• 問題：每次進(jìn)入頁面渴丸，都需要請(qǐng)求數(shù)據(jù)，用戶體驗(yàn)不好绽昏，而且切換頁面之后疮装，之前頁面不能保持狀態(tài)

• 解決方案：使用 keep-alive 組件阅虫，保持某些頁面狀態(tài)

<keep-alive include="Singer,Search">
   <router-view></router-view>
</keep-alive>

處理空白頁面，優(yōu)化用戶體驗(yàn)

main.js

• 問題：由于數(shù)據(jù)沒有請(qǐng)求過來，出現(xiàn)頁面空白現(xiàn)象柒巫，用戶體驗(yàn)差

• 解決方案：添加一個(gè)加載的插件励堡，每次請(qǐng)求數(shù)據(jù)，在數(shù)據(jù)沒有回來之前堡掏，展示加載插件

// 導(dǎo)入自定義的插件
import Loading from 'plugin/loading/index'

// 使用
Vue.use(Loading, {
 title: '正在加載...'
})

api/network.js

• 在請(qǐng)求數(shù)據(jù)中添加響應(yīng)和攔截器应结，然后使用加載的插件

let count = 0
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(function (config) {
 // 在發(fā)送請(qǐng)求之前做些什么
 count++
 Vue.showLoading()
 return config
}, function (error) {
 // 對(duì)請(qǐng)求錯(cuò)誤做些什么
 Vue.hiddenLoading()
 return Promise.reject(error)
})

// 添加響應(yīng)攔截器
axios.interceptors.response.use(function (response) {
 // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
 count--
 if (count === 0) {
   Vue.hiddenLoading()
 }
 return response
}, function (error) {
 // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
 Vue.hiddenLoading()
 return Promise.reject(error)
})

打包上傳到服務(wù)器，發(fā)現(xiàn)有些點(diǎn)擊事件失效

ScrollView

• 問題：發(fā)現(xiàn)在ScrollView組件包裹的內(nèi)容中泉唁，點(diǎn)擊事件都失效了（在IScroll包裹中失效）

• 解決方案：移動(dòng)端添加 click: true,tap: true,mouseWheel: true 使點(diǎn)擊事件生效

    mounted() {
      // 這里能拿到頁面元素
      this.iscroll = new IScroll(this.$refs.wrapper, {
        click: true,
        tap: true,
        mouseWheel: true,
        scrollbars: false, // 隱藏滾動(dòng)條
        probeType: 3, // 監(jiān)聽滾動(dòng)偏移位
        // 解決拖拽卡頓問題(禁用其他事件)
        scrollX: false,
        scrollY: true,
        disablePointer: true,
        disableTouch: false,
        disableMouse: true
      });
    }
  

打包后上傳到服務(wù)器刷新報(bào)錯(cuò)

解決方案：

• 不在使用history路由模式鹅龄，使用hash模式，但是亭畜，使用hash模式不利于SEO
• 依舊使用history路由模式扮休，但是需要后端人員處理

SPA頁面優(yōu)缺點(diǎn)

SPA優(yōu)點(diǎn)

• 有良好的交互體驗(yàn)，不會(huì)重新加載整個(gè)網(wǎng)頁, 只是局部更新

• 前端負(fù)責(zé)頁面呈現(xiàn)和交互, 后端負(fù)責(zé)數(shù)據(jù)

• 減輕服務(wù)器壓力贱案，只用處理數(shù)據(jù)不用處理界面

• 共用一套后端程序代碼

SPA缺點(diǎn)

• SEO難度較高肛炮，只有一個(gè)界面, 無法針對(duì)不同的內(nèi)容編寫不同的SEO信息

• 初次加載耗時(shí)多，為實(shí)現(xiàn)單頁Web應(yīng)用功能及顯示效果宝踪，需要在加載頁面的時(shí)候?qū)⑺蠮avaScript侨糟、CSS統(tǒng)一加載，在Vue中可以使用按需加載解決

SPA頁面預(yù)渲染

• 為了解決首次請(qǐng)求時(shí)間過長瘩燥，SEO難的問題

• 安裝插件：vue-cli-plugin-prerender-spa秕重、prerender-spa-plugin

  vue.config.js

  module.exports = {
    pluginOptions: {
      prerenderSpa: {
        registry: undefined,
          /* 這里填入需要分離的路由 */
        renderRoutes: [
          '/',
          '/recommend',
          '/singer',
          '/rank',
          '/search',
          '/account',
          '/detail'
        ],
        useRenderEvent: true,
        headless: true,
        onlyProduction: true
      }
    }
  }
  

• 打包之后發(fā)現(xiàn)dist文件夾中有 7 個(gè) html文件

SPA頁面SEO優(yōu)化

• 問題：我們已經(jīng)用預(yù)渲染將組件分離成不同的html文件了，那么如何添加SEO信息呢?

• 解決方案：安裝vue-meta-info插件厉膀，給每個(gè)打包的html文件的頭部添加SEO信息

  main.js

  import MetaInfo from 'vue-meta-info'
  
  Vue.use(MetaInfo)
  

• 新建文件來存儲(chǔ)管理SEO信息

  vue-meta-info.js

  export default {
    recommend: {
      title: '我是recommend',
      meta: [
        {
          name: 'keyWords',
          content: '關(guān)鍵字1,關(guān)鍵字1,關(guān)鍵字1'
        },
        {
          name: 'description',
          content: '這是一段網(wǎng)頁的描述1'
        }
      ]
    },
      //...
  }
  

• 給每個(gè)路由組件添加信息

  import MetaInfo from "../../../vue-meta-info";
  export default {
    name: "xxx",
    MetaInfo: MetaInfo.recommend,
      // ...
  }
  

• 刪除到public/index.html中頭部的SEO

解決預(yù)渲染打包后標(biāo)簽重復(fù)問題

vue.config.js

• 問題：預(yù)渲染打包后出現(xiàn)兩個(gè)<meta name="viewport".*user-scalable=no">標(biāo)簽

  由于node是模擬瀏覽器運(yùn)行環(huán)境溶耘，計(jì)算的尺寸出現(xiàn)問題，打包后的重復(fù)標(biāo)簽的值不正確服鹅，刷新后凳兵，重復(fù)的標(biāo)簽發(fā)生作用，導(dǎo)致頁面樣式排版達(dá)不到預(yù)期

• 解決方案：查找到重復(fù)的標(biāo)簽企软，并替換掉

postProcess: route => {
   // 預(yù)渲染內(nèi)容寫入之前的額外操作
   let reg = /<meta name="viewport".*user-scalable=no">/gi
   let res = route.html.match(reg)
   route.html = route.html.replace(res[1], '')
}

打包上架后加載插件出現(xiàn)重復(fù)

vue.config.js

• 問題：和標(biāo)簽重復(fù)是一個(gè)問題

• 解決方案：這里使用jsdom插件來處理

• 安裝jsdom

  const jsdom = require('jsdom')
  const { JSDOM } = jsdom
  
  postProcess: route => {
    // 預(yù)渲染內(nèi)容寫入之前的額外操作
    // 1.根據(jù)字符串創(chuàng)建一個(gè)網(wǎng)頁
    let html = new JSDOM(route.html)
    // 2.從創(chuàng)建好的網(wǎng)頁中拿到document對(duì)象
    let dom = html.window.document
    // 3.找到對(duì)應(yīng)的元素, 刪除對(duì)應(yīng)的元素
    let loadingEle = dom.querySelector('.container')
    dom.body.removeChild(loadingEle)
  
    route.html = html.serialize()
    return route
    }
  }
  

END