0
点赞
收藏
分享

微信扫一扫

vue 开发中报错点【二】

Sky飞羽 2023-01-03 阅读 64


本页目录

npm安装依赖报错

npm install 报错chromedriver 记录

IE9中, 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题

elementUI的el-input删除操作无法触发数据变动监听

mounted钩子函数中请求数据导致页面闪屏问题

class动态绑定 三元写法

vue获取后端数据应该在created还是mounted方法

Vue2.0项目中使用axios 一开始json文件放在根目录下,怎么访问都是报错404

Vue packages version mismatch: 版本始终报错不一致的解决方案

 

npm安装依赖报错:permission denied,错误信息大致如下:

npm ERR! Darwin 15.6.0                                                                                                                     
npm ERR! argv
npm ERR! node
npm ERR! npm
npm ERR! path
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall mkdir

npm ERR! Error: EACCES: permission denied, mkdir
npm ERR! at Error (native)
npm ERR! { Error: EACCES: permission denied, mkdir
npm ERR! at Error (native)
npm ERR! errno: -13,

关键错误信息:Error: EACCES: permission denied, 解决办法:

 win系统 管理员身份运行cmd再npm命令

 mac系统 全局要加sudo sudo npm install ....

 

npm install 报错chromedriver 记录,错误信息如下:

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! chromedriver@2.34.1 install: `node install.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the chromedriver@2.34.1 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

该问题是vue-cli脚手架的一个bug,解决办法:

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

IE9中, 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题

解决方法:

/**
* 强制重绘页面的select 输入框,解决IE9只显示单个字符串问题
* @param useNextTick {Boolean} 使用在vm next tick 处理, 默认true
*/
forceRedrawSelect: function (useNextTick) {
useNextTick = useNextTick !== false;
if (!browser.isIE)
return;
var _this = this;
var redraw = function () {
var $select = _this.$("select");
$select.css('width', 0);
$select.css('width', ''); // remove from style tag
};
if(useNextTick)
this.$nextTick(redraw);
else
redraw()
},

vue 解决​​ie9​​的兼容问题

当vue遇见ie9的时候,部署到​​服务器​​之后,打开居然是一片空白

1.首先  ​​npm install --save babel-polyfill​

然后在​​main.js​​​中的最前面引入​​babel-polyfill​

import 'babel-polyfill'

 

2.在index.html 加入以下代码(非必须)

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

3.在config中的​​webpack.base.conf.js​​中,修改编译配置

entry:{
app:['babel-polyfill','./src/main.js']
}

4.当然,如果你只用到了 ​​axios​​​ 对 ​​promise​​​进行兼容,可以只用 ​​es6-promise​

npm install es6-promise --save

 

5.在 ​​main.js​​ 中的最前面 引入

import 'es6-promise/auto'

IE9中,elementUI的el-input删除操作无法触发数据变动监听

解决办法:加入ie9input事件垫片
cnpm install --save ie9-oninput-polyfill

 

mounted钩子函数中请求数据导致页面闪屏问题

其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了

class动态绑定 三元写法:

:class="[isShowTab?'showTab':'noShowTab']"

vue获取后端数据应该在created还是mounted方法:

看情况了,一般放到created里面就可以了,这样可以及早发请求获取数据,如果有依赖dom必须存在的情况,就放到

mounted(){

this.$nextTick(() => {

/* code */

}) }里面

 

window.addEventListener('scroll',function(){ 

 在这个里面使用this.data 提示未定义,请问如何访问data(){return {}}的数据
试试 用 ()=> {}或者:
this.$data或者:
let vm =this ;window.addEventListener('scroll',function(vm ){})

这样 你就能 访问  vue 的  this 

Vue2.0项目中使用axios 一开始json文件放在根目录下,怎么访问都是报错404

讲json放到了static目录下就可以访问了

Vue packages version mismatch: 版本始终报错不一致的解决方案

报错说:

Module build failed: Error:

Vue packages version mismatch:

- vue@2.4.4

- vue-template-compiler@2.5.13

报错原因:通常出现于一些依赖库的更新或者安装新的依赖库之后(可以认为npm update已经成为一种习惯),导致了vue和vue-template-compiler的版本不一致。

解决方案:


1 npm instll 2 npm update 3 先运行npm update 报错还是一样,我们只要重新在执行一下npm install 安装一下就可以成功运行

举报

相关推荐

0 条评论