在拉去仓库代码后，然后npm install报错，这个时候是因为我一些版本兼容问题导致的，
不同依赖包要求使用相同的包的不同版本，npm无法解决依赖项之间的冲突
npm安装依赖时报错npm ERR! code ERESOLVE
2024-10-21
49
分类 前端 下的文章
在使用eyoucms中，使用了gitee仓库建立了整套代码的提交，然后回家用家里电脑使用拉代码运行的时候发现出现了报错，数据库是使用服务器上宝塔建立的远程的数据库，试过很多种方式处理最终通过清除缓存目录就解决了。示例如下：
把data>runtime>cache删除掉
关于使用uniapp的vue-cli命令式运行会报错，特别收藏记录了几种问题
报错：node-sass和sass-loader
node 版本14.17.1，需要适配响应的node-sass和sass-loader版本
参考链接：https://blog.csdn.net/m0_67392126/article/details/126113751
解决方案：
1、先卸载：
npm uninstall node-sass
npm uninstall sass-loader
2、安装：
npm install --save-dev node-sass@4.14.1
npm install --save-dev sass-loader@7.3.1
npm install --save-dev node-sass@4.14.1
npm install --save-dev sass-loader@7.3.1
报错：PostCSS plugin autoprefixer requires PostCSS 8
参考链接：https://blog.csdn.net/candyyii/article/details/109055180
解决方案：
npm i postcss-loader autoprefixer@8.0.0
有时候我们页面上会有多个表单，且表单中绑定的字段有重复，这时会出现blur无法激活表单的正常验证，这时候就需要用于key，只需要给el-form-item标签，添加key属性即可，如1：
<el-form-item label="联系方式" prop="contact_information" :key="Math.random()">
<el-input v-model="itemForm.contact_information" placeholder="请输入联系方式"></el-input>
</el-form-item>
有的时候验证红色文字出现后，然后给表单赋值但是还是通不过，其实是有值的，也可以用这种绑定key的方法，如2：
<el-form-item label="视频封面:" prop="videoBanner" v-if="videoParams.videoPath" :key="Math.random()">
<div class="coverCont">
<el-image fit="contain" class="topicCover" :src="videoParams.videoBanner" v-if="videoParams.videoBanner">
</el-image>
<el-button type="primary" @click="getCovers" style="width: 98px">选择封面</el-button>
<el-input style="display: none;" v-model="videoParams.videoBanner" />
</div>
</el-form-item>
因为这些字段并不是在任何循环中，所以这里的key直接用了一个随机数，这样修改过以后，blur事件就可以正常激活表单的验证了，不然就会发生鼠标点击并离开输入框时，无法进行验证的问题。
杜绝用户右键查看源码和F12以及ctrl+U
<script>
((function () {
var callbacks = [],
timeLimit = 50,
open = false;
setInterval(loop, 1);
return {
addListener: function (fn) {
callbacks.push(fn);
},
cancleListenr: function (fn) {
callbacks = callbacks.filter(function (v) {
return v !== fn;
});
}
}
function loop() {
var startTime = new Date();
debugger;
if (new Date() - startTime > timeLimit) {
if (!open) {
callbacks.forEach(function (fn) {
fn.call(null);
});
}
open = true;
window.stop();
alert('不要看代码啦！');
window.location.reload();
} else { open = false; }
}
})())
.addListener(function () {
window.location.reload();
});
document.oncontextmenu = new Function("event.returnValue=false");
document.onselectstart = new Function("event.returnValue=false");
document.οnkeydοwn = new Function("event.returnValue=false");
document.onkeydown = function (e) {
if (e && e.keyCode === 123 || e && e.keyCode === 85 || e && e.keyCode === 83) {
e.returnValue = false;
return false;
}
};
</script>由于小程序使用了阿里云的点播方式上传视频转码查看，大大的把视频压缩处理了，无论是上传还是查看都速度挺快的。
但是PC上如果使用普通的video标签直接播放m3u8是会出问题的。
所以找到了video.js这个好的插件使用起来得心应手，支持m3u8也支持向的mp4视频格式播放
接下来记录下操作记录：
1、npm安装video.js
npm install --save-dev video.js
2、在vue脚手架中引入video.js(main.js引入)
import Video from 'video.js' //videojs
import 'video.js/dist/video-js.css' //videocss样式
Vue.prototype.$video = Video //装载Video播放器
3、建立一个子组件方便多个地方使用
npm ERR! Cannot set properties of null (setting ' dev' )
删除node_modules、package-lock.json、yarn.lock
npm config get registry 查看自己的仓库源
正常遇到这种报错，直接在集成终端输入以下任意一个命令即可：
npm config set registry http:/registry.npmmirror.com/
npm install --force --registry=https://registry.npmmirror.com
--
本次项目所用的命令：
npm install --force --registry=https://registry.npmmirror.com; cnpm i
image-webpack-loader -D
yarn config set registry https://registry.npmmirror.com
然后npm装第三方组件库的依赖就没有问题啦，运行马上成功