千奇百怪的Bug

1、无论中英文的视频详情页，鼠标移动到播放键，都会显示英文的提示语。可以将中英文页面的此提示语都删除，或将中文页面提示语改为“播放视频”

现象分析：

​ 使用的内部组件封装 使用的是vue-video-player,配置项设置的语言为 zh-CN,

​ 再分析vue-video-player 依赖的video.js，vue-video-player的配置项其实就是ideo.js的配置项

​ video.js的dist包中lang文件是有zh-CN.js语言文件的 =》没搞懂为啥不生效

解决bug：

分析 vue-video-player 发现是默认导出了videojs 的 如下

import _videojs from 'video.js'
import videoPlayer from './player.vue'

const videojs = window.videojs || _videojs
const install = function (Vue, config) {
  if (config) {
    if (config.options) {
      videoPlayer.props.globalOptions.default = () => config.options
    }
    if (config.events) {
      videoPlayer.props.globalEvents.default = () => config.events
    }
  }
  Vue.component(videoPlayer.name, videoPlayer)
}

const VueVideoPlayer = { videojs, videoPlayer, install }

export default VueVideoPlayer
export { videojs, videoPlayer, install }

// 再封装vue-video-player的地方 导出videojs 新增一个语言包 ，并设置为默认语言

// 本组件依赖于vue-video-player
import "video.js/dist/video-js.css";
import "@/assets/css/custom-theme.css";
import { videoPlayer, videojs } from "vue-video-player";
console.log("videojs", videojs);
videojs.addLanguage("my-set", {
  "Play Video": " ", // 这里做空操作
});
	
	//option=> playerOptions: {
     //   language: "my-set",
    //};

2、个人服务器使用pm2 运行本地服务出现 Invalid Host header

经查是因为新版的webpack-dev-server出于安全考虑，默认检查hostname，如果hostname不是配置内的就不能访问。这样有2中方法，一种是设置跳过host检查，一种是直接host设置成你的地址。

// vue.config.js vue-cli配置文档

devServer: {
    disableHostCheck: true
}

3、播放组件使用 vue-video-player 但是 当初始时 设置options sources 选项内的src为空时会报错，同时设置为合理url的时候不生效

解决：

​ 当src不是有效值时 直接sources 选项为空数组 有才push值

4、echart中真实数据值正确，折线图 线条位置和数值对应不上，是相反的

原因：

series:[
	{
        name: "PV",
        type: "line",
        // stack: "Total",
        data: PVData,
    }
]

查官方文档

stack 数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。

所以去掉即可

5、 刷新页面出现 Uncaught SyntaxError: Unexpected token ‘<’

原因：

vue.config.js中 
publicPath: './',
nginx中设置的 项目地址是 http://yucheng.press/b/
所以报错

解决：

​ 查阅资料： 静态资源最终访问路径 = output.publicPath + 资源loader或插件等配置路径 =》未找到静态资源的意思

修改为 publicPath: ‘/b/’,解决

6、函数调用 遇到 () 语法错误

错误代码

        this.dealLabel(params)  // => 少了分号
          (this.action === "modify"
            ? ColumnsApi.articlesEdit(params)
            : ColumnsApi.articlesAdd(params)
          ).then(() => {

            this.$router.back();
          }).catch(()=>{
            this.isSave = false
          });

// 报错 this.dealLabel 不是function

解决

 this.dealLabel(params);  // => 少了分号
(this.action === "modify"
 ? ColumnsApi.articlesEdit(params)
 : ColumnsApi.articlesAdd(params)
)

7、echart的底部label太长无法显示问题

资料： https://blog.csdn.net/weixin_33896726/article/details/92579803