VUE开发问题汇总

在开发过程中会遇到一些问题，有的生成文字记录了下来，有的解决了就忘了，之前都是存在本地，感觉每次使用都很麻烦，所以专门在此记录一下。

目录

Npm低版本安装不成功，解决办法 在后面加  --legacy-peer-deps

一、VUE开发问题汇总

1. 使用Echarts，报错Initialize failed: invalid dom

2.定时器一直循环

3.内部div的margin影响外部div的margin

4.打包之后文件、图片、背景图资源不存在或者路径错误

5.vue点击按钮重新加载页面（vue第一次加载页面点击按钮出现页面刷新问题，之后一切正常）

6. el-table-column序号列设置type类型后min-width列宽百分比无效

7. 参数不变重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题（捕获冗余导航）

8. 时间选择器清除报错，报错信息:[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘0’ of null”

9、el-table切换高度缩减

---

Npm低版本安装不成功，解决办法 在后面加  --legacy-peer-deps

1. 使用Echarts，报错Initialize failed: invalid dom

浏览器加载时会先去解析js代码，当浏览器执行document.getElementById(Plant[0])时，由于id为Plant[0]的dom对象还未被创建，报错Initialize failed: invalid dom.

this.$nextTick这个方法作用是，当数据被修改后使用这个方法，会回调获取更新后的dom再渲染出来

this.$nextTick(function () {

    //要处理的内容

}

2.定时器一直循环

Vue离开页面定时器需要清除，不然会一直循环

const timer = setInterval(() =>{ // 某些定时器操作   }, 500);           

// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。

this.$once('hook:beforeDestroy', () => {                    

        clearInterval(timer);                                    

})

3.内部div的margin影响外部div的margin

（1）给外部div加overflow：auto（2）给外部div加边框border

4.打包之后文件、图片、背景图资源不存在或者路径错误

1、使用命令npm run build打包vue项目之后提示 ：
“Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won’t work.”，
并且在本地打开index.html是空白页，是因为打包的时候配置文件config的index.js的build配置是默认assetsPublicPath为“/”根路径，把assetsPublicPath修改为“./”同一个路径重新打包即可。

2、解决了页面空白问题之后会出现css样式的图片不显示问题，那么在build的目录下的utils.js文件添加publicPath: '…/…/'重新打包即可。

5.vue点击按钮重新加载页面（vue第一次加载页面点击按钮出现页面刷新问题，之后一切正常）

在form表单中button默认的“type='submit'”，点击会导致整个页面重新加载；采用框架自带的组件如“el-button”或者单独设置type属性如“type='button'”

6. el-table-column序号列设置type类型后min-width列宽百分比无效

el-table-column序号列直接type="index" 获取，min-width设置的百分比不会生效

解决：使用该种方法获取序号列

<el-table-column label="序号" min-width="40%">
      <template scope="scope">
            {{ scope.$index + 1 }}
          </template>
</el-table-column>

7. 参数不变重复点击相同路由，出现 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation 问题（捕获冗余导航）

解决方案一：对Router原型链上的push、replace方法进行重写

在 router  js文件里，添加如下代码：

const VueRouterPush = Router.prototype.push
Router.prototype.push = function push (to){
    return VueRouterPush.call(this,to).catch(err => err)
}

解决方案二：在跳转时，判断是否跳转路由和当前路由是否一致，避免重复跳转产生问题

toMenu(item){
    if(this.$route.path !== item.url){
        this.$router.push({ path:item.url })
    }
}

解决方案三：使用 catch 方法捕获 router.push 异常

this.$router.push(route).catch(err => {
    console.log("输出报错“，err)
})

8. 时间选择器清除报错，报错信息:[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘0’ of null”

当点击清除按钮的时候，value会被设置为null,Element-ui中没有内置清除按钮的回调函数。

在下次调用之前，为value重新赋值

If(!this.value){

    this.value=[]

}

9、el-table切换高度缩减

.el-table__body-wrapper{
    flex: 1;
}