vue项目中遇到的细节（坑）整理

本文链接：https://blog.youkuaiyun.com/weixin_47686269/article/details/109283512

本文总结了在Vue项目中遇到的一些问题及其解决方案，包括Ctrl+S无法格式化时的解决办法，背景图片适配的处理，Element-UI表单组件的适配策略，如label-width的设置和表单宽度控制，以及在处理请求和结果优化时的注意事项，如避免undefined错误和使用try-catch进行异常处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中遇到的细节（坑）整理

当Ctrl +s 无法格式化的时候
原因：多个格式化文件进行冲突
解决办法：alt +shift+F 选择标准格式化文件

当使用背景图片时，要实现页面适配，一定要给背景图片设置font-size大小
background: url(’…/assets/Home/半圆勾.png’);
background-size: 15px;

当使用element-UI 中的表单组件时，如果要实现页面适配，label-width属性的大小不能是px 需要使用百分比
切记：label-width属性控制的是表单前面形容词的宽度！！！
eg 姓名：这一段的长度

 <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            class="demo-ruleForm"
            :label-position="labelPosition"
            status-icon
            label-width="30%"
            size="mini"
          >
 </el-form>

当使用element-UI 中的表单组件时，如果要单独控制一个表单的长度，需要给表单标签添加单独的类，并设置宽度

 <el-form-item label="身份证号" prop="insurerIdCard">
              <el-input
                v-model="ruleForm.insurerIdCard"
                placeholder="请输入身份证号码..."
                class="idCardWidth"
              >
              </el-input>
 </el-form-item>
 
   .idCardWidth {
            width: 140px;
          }

项目中发送请求展示更多问题时，会报question undefined 的错，这个时候需要使用三元运算符设置一个初始值

{{  this.commonProblem[0] ? this.commonProblem[0].question : ''}}

项目中对返回结果进行优化try catch

   const base64DecryptData = JSON.parse(
          this.$Base64.decode(this.$jsd.decryptLong(res.data))
        )

优化步骤

 let base64DecryptData = {}
        try {
          base64DecryptData = JSON.parse(
            this.$Base64.decode(this.$jsd.decryptLong(res.data))
          )
        } catch (error) {
          //这里面不能为空，单纯留两个斜杠也行
        }

对获取地址栏token进行解密的优化

  const { data } = this.$route.query
    let base64DecryptData = {}
    try {
      base64DecryptData = JSON.parse(
        this.$Base64.decode(this.$jsd.decryptLong(this.$Base64.decode(data)))
      )
    } catch (error) {
      //
    }
    const token = base64DecryptData['token']
    this.ruleForm.token = token