记录学习中遇到的bug和技术

万没理了

已于 2023-10-10 16:56:33 修改

阅读量297

点赞数

文章标签：学习 bug vue.js

于 2023-09-20 10:56:23 首次发布

本文链接：https://blog.csdn.net/qq_56946464/article/details/133070053

版权

100vh出现滚动条

一般由于是由于body元素的margin属性不为0造成的，将margin改成0

或者设置body属性，overflow:hidden

或者设置html属性，overflow:hidden

嵌套路由组件重复渲染

如图

问题尚未完全解决，目前是新建应该空白vue文件，添加上<router-view>，将父路由位置设置为该空白文件，将原本父路由文件设置为子路由且为默认路由，可以解决，但是破坏了路由结构，感觉不是很好

问题解决：

项目中我在App组件中导入组件页面进行展示的，这就导致渲染页面时会重复导入，解决方法，不要在app内所有导入组件页面，要直接使用<router-view>

配置路由

在配置路由时，如果有一个主页面，主页面格局用户点击而展示不同的路由页面，那么应该给每个一级路由配置页面为主页面，在二级路由配置外面需要展示的页面

npm安装时报错

Not Found - GET https://registry.npmjs.org/@vue%2fvue-loader-v15 - Not found

原因是vue3的项目对于node版本要求需要16.0以及16.0以上，所以需要修改node版本

设置默认路由页面

设置谁为默认路由，可以先设置应该路径为/的路由，后重定向至外面需要设置的默认路由，如果有多个路径为/的路由，与默认路由有关的路径为/的路由应该放到最前面

修改element的样式

element的样式都是外部引入的，而外部引入的样式文件优先级更高，所以外面在内部修改样式并不会生效，外面需要插件应该css文件专门去修改element样式，如果该样式是通用样式，那么外面可以是入口文件引入，但是注意必须比element的样式后导入，否则不会生效，如果只是在当前页面有效，那么我们就在当前页面导入就行了。

vue3中使用echarts报错

Cannot read properties of undefined (reading 'init')

引入echarts的方式不对，查看自己版本，echarts5版本的引入方式为 import * as echarts from 'echarts'

Initialize failed: invalid dom.

无效dom，原因是代码中还未加载出dom，就已经开始了渲染图表

应该将echarts的应用放入onMounded函数中

echarts切换路由回来后表消失

切换路由后再切换回来，此时页面上已经有了echarts实例，不会再重新渲染，数据也就不会加载，就会出现表消失的情况

解决方法：在挂载函数中使用myChart1.dispose()将其销毁，这样重新回来页面时页面没有echarts实例，就会重新渲染

element表格组件单独对一个元素渲染

需要给el-table绑定:cell-style="cellStyle"事件，返回值是你需要的样式

const cellStyle = (data) => {
    //判断当前是不是行中下标为四的位置，这里判断，返回的样式就会作用到整行
    if (data.columnIndex == 4) {
        if (data.row.status === '已发货') {
            return {
                color: '#50d1a6'
            }
        }else{
            return{
                color:'#606266'
            }
        }
    }

}

使用element表格组件报错

Error：ResizeObserver loop completed with undelivered notifications.

错误原因：元素尺寸发生了变化，导致其他元素位置形态发生变化

解决方法：修改table表格内部每一列的宽度，使其不影响周围组件的尺寸大小

请求数据报错target must be an object

原因，传递参数时，params没有采用对象形式，而是直接{params:page}，正确做法应该是采用对象形式{params:{page}}

mock数据请求正常，只要加上参数就404

原因，mock拦截不到带参数的get请求,因为他只能拦截到前半部分没带参数的路径,而后面带参数的部分拦截不到,可以使用正则表达式写路径来解决这个问题

需要在onMounted函数中调用异步方法并使用方法返回的数据

一般情况下，onMounted钩子中调用异步方法后，js并不会立刻执行该异步方法，而是会继续向后执行，最后实现异步，但是这就导致我们无法在onMounted中使用异步方法返回的数据

所以我们需要给onMounted钩子加上async，给被调用的异步方法加上await，就可以正常在onMounted钩子中使用了

onMounted(async()=>{
    await getPie()
})

页面渲染时数据还未得到

可以定义一个布尔属性，初始设置为false，在异步执行完毕后，数据得到了将其修改为true，然后将该布尔属性作为需要渲染的页面的v-if属性值，就可以确保在数据存在的时候展示页面

<template>
<div v-if="isOK">{{data}}</div>
</template>
<script>
    let isOk=ref(false)
    let data=ref([])
    const getCharts = async () => {
        const res = await axios.get('/data/charts')
        if (res.data.status == 200) {
            data.value = res.data.result.saleChartData.Histogram
        }
        isOK.value=true
    }
</script>

express框架静态中间件无法获取到资源

在使用静态资源中间件时，使用的是express生成的骨架，在app.js中管理所有的接口内容，现在问题是在一个image接口中，我想要实现访问该接口，根据不同的地址就访问不同的图片，但是地址正确，却访问不到图片资源。

解决：取消imag的接口，将静态资源中间件直接放在app.js中,并放在最前面的位置

app.use('/images',express.static(path.join(__dirname,'data','image')))

刷新页面请求地址错误

一般来说，在开发过程中会配置代理跨域，但是这次在配置代理跨域后，刷新页面却报错了

报错内容是请求失败

正常请求地址是http://localhost:8080/goods/selling，代理跨域后就变成了http://127.0.0.1:3000/goods/selling

进入页面时，请求正常，但是刷新页面后，请求地址变成了http://localhost:8080/goods/commodity/selling，这是路由地址，并不是请求地址，代理后地址错误，就报错请求失败 404

原因是路由地址和请求地址相似，这里的路由地址是/goods/commodity/selling，而请求地址是goods/selling，如果你在跨域配置中没有精准配置，如

devServer: {
    proxy: {
      "/goods/selling": {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
      }
    },
  }

而是进行了模糊匹配

devServer: {
    proxy: {
      "/goods": {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
      }
    },
  }

那么，当你属性页面时，浏览器会尝试加载路由页面，而此时路由地址也符合代理跨域的匹配，就会进行代理，变成http://127.0.0.1:3000/goods/commodity/selling，那么实际上服务器是没有这个地址的，所以报错。

解决方法：

上面的精准匹配
将路由改名，不和请求地址相似
将请求地址更改，不和路由地址相似

请求地址自动添加路由地址导致请求404

import { defineStore } from 'pinia'
import axios from 'axios'
export const userBrandDataStore=defineStore('brand',()=>{
    let brands=[]
    const requestBrand=(async()=>{
        let result=await axios.get('cape/merchandise/selling')
        if(result.status==200){
            brands=result.data.data
        }
        return brands
    })
    return {
        requestBrand,
    }
})

原因：axios请求格式错误，请求应该以 / 开头

修改为

let result=await axios.get('/cape/merchandise/selling')

导入仓库方法，调用，报错该方法不是一个函数

错误详情，该仓库方法是一个请求，在组件中解构出来后在某个事件中调用，然后在组件的onMounted钩子中调用该事件。运行问题，第一次进入该页面，报错该请求方法不是一个函数，刷新页面后正常调用

可能原因，导入仓库方法时，初始化为完成，但是方法已经开始调用

解决方法：未解决，无法确认真正错误原因，使用其他方法：进入页面时，强制刷新一次

//刷新页面代码
if (location.href.indexOf("#reloaded") == -1) {
      location.href = location.href + "#reloaded";
      location.reload();
    }

按照element-plus报错找不到css文件

错误原因：路由含有中文或版本与导入css方式不匹配