本章主要填坑
IOS中无法进行歌曲预加载
Player组件
IOS中系统不会自动加载歌曲,所以oncanplay永远不会执行
解决方案：如何监听IOS中歌曲已经准备好了,通过ondurationchange事件来监听
ondurationchange 当歌曲加载完成后执行
手机预览项目没有控制台展示
main.js
- 解决方案：为了能在手机中调试项目，添加 vconsole 插件
import VConsole from 'vconsole' const vconsole = new VConsole() Vue.use(vconsole)
路径的简写
vue.config.jsmodule.exports = { /* 部署应用包的基本URL, 避免出现打包后项目找不到资源问题 */ publicPath: './', configureWebpack: { //配置别名,默认src为@,修改后需要重新编译才能生效 resolve: { alias: { 'api': '@/api', 'assets': '@/assets', 'components': '@/components', 'router': '@/router', 'store': '@/store', 'views': '@/views', 'tools': '@/tools', 'plugin': '@/plugin' } } } }
保持页面状态，避免每次进入页面都需要加载一次，优化性能
App.vue
问题：每次进入页面，都需要请求数据，用户体验不好，而且切换页面之后，之前页面不能保持状态
解决方案：使用 keep-alive 组件，保持某些页面状态
<keep-alive include="Singer,Search"> <router-view></router-view> </keep-alive>
处理空白页面，优化用户体验
main.js
问题：由于数据没有请求过来，出现页面空白现象，用户体验差
解决方案：添加一个加载的插件，每次请求数据，在数据没有回来之前，展示加载插件
// 导入自定义的插件 import Loading from 'plugin/loading/index' // 使用 Vue.use(Loading, { title: '正在加载...' })
api/network.js
- 在请求数据中添加响应和拦截器，然后使用加载的插件
let count = 0 // 添加请求拦截器 axios.interceptors.request.use(function (config) { // 在发送请求之前做些什么 count++ Vue.showLoading() return config }, function (error) { // 对请求错误做些什么 Vue.hiddenLoading() return Promise.reject(error) }) // 添加响应拦截器 axios.interceptors.response.use(function (response) { // 对响应数据做点什么 count-- if (count === 0) { Vue.hiddenLoading() } return response }, function (error) { // 对响应错误做点什么 Vue.hiddenLoading() return Promise.reject(error) })
打包上传到服务器，发现有些点击事件失效
ScrollView
问题：发现在ScrollView组件包裹的内容中，点击事件都失效了（在IScroll包裹中失效）
解决方案：移动端添加 click: true,tap: true,mouseWheel: true 使点击事件生效
mounted() { // 这里能拿到页面元素 this.iscroll = new IScroll(this.$refs.wrapper, { click: true, tap: true, mouseWheel: true, scrollbars: false, // 隐藏滚动条 probeType: 3, // 监听滚动偏移位 // 解决拖拽卡顿问题(禁用其他事件) scrollX: false, scrollY: true, disablePointer: true, disableTouch: false, disableMouse: true }); }
打包后上传到服务器刷新报错
解决方案：
- 不在使用history路由模式，使用hash模式，但是，使用hash模式不利于SEO
- 依旧使用history路由模式，但是需要后端人员处理
SPA页面优缺点
SPA优点
有良好的交互体验，不会重新加载整个网页, 只是局部更新
前端负责页面呈现和交互, 后端负责数据
减轻服务器压力，只用处理数据不用处理界面
共用一套后端程序代码
SPA缺点
SEO难度较高，只有一个界面, 无法针对不同的内容编写不同的SEO信息
初次加载耗时多，为实现单页Web应用功能及显示效果，需要在加载页面的时候将所有JavaScript、CSS统一加载，在Vue中可以使用按需加载解决
SPA页面预渲染
为了解决首次请求时间过长，SEO难的问题
安装插件：
vue-cli-plugin-prerender-spa、prerender-spa-plugin
vue.config.jsmodule.exports = { pluginOptions: { prerenderSpa: { registry: undefined, /* 这里填入需要分离的路由 */ renderRoutes: [ '/', '/recommend', '/singer', '/rank', '/search', '/account', '/detail' ], useRenderEvent: true, headless: true, onlyProduction: true } } }打包之后发现dist文件夹中有 7 个 html文件
SPA页面SEO优化
问题：我们已经用预渲染将组件分离成不同的html文件了，那么如何添加SEO信息呢?
解决方案：安装
vue-meta-info插件，给每个打包的html文件的头部添加SEO信息
main.jsimport MetaInfo from 'vue-meta-info' Vue.use(MetaInfo)新建文件来存储管理SEO信息
vue-meta-info.jsexport default { recommend: { title: '我是recommend', meta: [ { name: 'keyWords', content: '关键字1,关键字1,关键字1' }, { name: 'description', content: '这是一段网页的描述1' } ] }, //... }给每个路由组件添加信息
import MetaInfo from "../../../vue-meta-info"; export default { name: "xxx", MetaInfo: MetaInfo.recommend, // ... }删除到
public/index.html中头部的SEO
解决预渲染打包后标签重复问题
vue.config.js
问题：预渲染打包后出现两个
<meta name="viewport".*user-scalable=no">标签由于node是模拟浏览器运行环境，计算的尺寸出现问题，打包后的重复标签的值不正确，刷新后，重复的标签发生作用，导致页面样式排版达不到预期
解决方案：查找到重复的标签，并替换掉
postProcess: route => { // 预渲染内容写入之前的额外操作 let reg = /<meta name="viewport".*user-scalable=no">/gi let res = route.html.match(reg) route.html = route.html.replace(res[1], '') }
打包上架后加载插件出现重复
vue.config.js
问题：和标签重复是一个问题
解决方案：这里使用
jsdom插件来处理安装
jsdomconst jsdom = require('jsdom') const { JSDOM } = jsdom postProcess: route => { // 预渲染内容写入之前的额外操作 // 1.根据字符串创建一个网页 let html = new JSDOM(route.html) // 2.从创建好的网页中拿到document对象 let dom = html.window.document // 3.找到对应的元素, 删除对应的元素 let loadingEle = dom.querySelector('.container') dom.body.removeChild(loadingEle) route.html = html.serialize() return route } }
