整理Vue项目开发过程中遇到的常见问题1_injection &quot；dropdown&quot； not found(1)

收集整理了一份《2024年最新物联网嵌入式全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升的朋友。

如果你需要这些资料，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

9 更换主题颜色后 el覆盖样式不起作用了

解决办法：更改element默认的样式 

10 deep深度选择器ie不支持 首页图标三条横线颜色更改不了

解决办法：用fill属性控制svg图标的颜色
<style scoped>
.el-dialog__wrapper /deep/ .el-dialog {
  width: 60% !important;
}
</style>

11 项目启动时遇到以下错误：This dependency was not found…

This dependency was not found:
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vue
in ./src/components/a.vue

To install it, you can run: npm install --save
!!vue-style-loader!css-loader?{“minimize”:false,“sourceMap”:false}!../…/node_modules/vue-loader/lib/style-compiler/index?{“vue”:true,“id”:“data-v-1d57e5ea”,“scoped”:false,“hasInlineConfig”:false}!stylus-loader?{“sourceMap”:false}!../…/node_modules/vue-loader/lib/selector?type=styles&index=0!./a.vu

解决方案： 一般提示出现什么什么找不到时，就是缺少相关依赖包，按提示重新安装提示的依赖包即可
npm install sass-loader --save
npm install node-sass --save

12 [Vue warn]: Duplicate keys detected: ‘101121201’. This may cause an update error.

解决方案：使用v-for遍历时，没有设置key值
注意：key值是必须唯一的，如果重复就会报错，可以把key值改为index（其实就是用索引做key值），就可以避免这个情况：

<ul>
    <li v-for="(item,index) in array" :key="index">{{item.name}</li>
</ul>

13 找不到未定义的resetFields属性

vue.esm.js?efeb:591[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'validate' of undefined"
[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined"
解决办法：给表单添加ref属性

14 我们有时候常碰到vue中明明修改了数据，但是视图无法更新，因此我总结了一点点碰到此类的情况：

1、v-for遍历的数组，当数组内容使用的是arr[0].xx =xx更改数据，vue无法监测到

数组数据变动：我们使用某些方法操作数组，变动数据时，有些方法无法被vue监测，有些可以
Vue包装了数个数组操作函数，使用这些方法操作的数组去，其数据变动时会被vue监测： 
push() //向数组的结尾添加一个或多个元素并返回新的长度
pop() //删除元素并返回数组的最后一个元素
shift() //向数组的开头添加一个或多个元素并返回新的长度
unshift() //删除元素并返回数组的第一个元素
splice() //删除元素并返回被删除元素的数组
sort() //对数组中元素进行排序
reverse() //颠倒数组中元素的顺序
split() //方法用于把一个字符串分割成字符串数组
vue2.0还增加个方法可以观测Vue.set(items, indexOfItem, newValue)
filter(), concat(), slice() 。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组
Vue 不能检测以下变动的数组： 
① 当你利用索引直接设置一个项时，vm.items[indexOfItem] = newValue
② 当你修改数组的长度时，例如： vm.items.length = newLength
三种方式都可以解决，使用Vue.set、vm.$set()或者数组的splice方法。

15 常见状态码错误

Request failed with status code 400
解决方法：把传给后台的时间参数转换成时间戳的格式

Error occured while trying to proxy to: localhost:9527/api//auth/jwt/token
Failed to load resource: the server responsed with a status of 504 (Gateway Timeout)
解决方法：后台服务器可能没有启动

errError: Request failed with status code 401 (Unauthorized)
解决方法：交给后端开发人员处理

常见状态码解释

200 请求成功

304 请求的页面没有修改

400 请求语法错误服务器不理解
401 请求要求用户的身份信息
403 服务器理解请求客户端的请求，但是拒绝执行此请求
404 请求资源找不到

500 服务器内部错误，无法完成请求
504 充当网关或代理的服务器 末及时从远端服务器获取请求

16 如果进去某个页面后，这个页面突然卡住不能动，可能页面中那个标签嵌套不合法 比如查看el-table后面是否多了一个>符号

Do not use built-in or reserved HTML elements as component id:filter 不能用内置的元素作为组件的id名称

17 不能登录系统并提示error occurred while trying to proxy request /api//xx/xx/xx to http://192.168.1.188:8765

解决方法： 
1 看有没有断网
2 服务器的IP地址有没有变
3 服务器地址能否ping通(ipconfig)，如不能拼通，查看本地防火墙是否开启

18 Error: listen EADDRNOTAVAIL 192.168.1.166:9527

Error: listen EADDRNOTAVAIL 192.168.1.166:9527
    at Object._errnoException (util.js:1024:11)
    at _exceptionWithHostPort (util.js:1046:20)
    at Server.setupListenHandle [as _listen2] (net.js:1334:19)
    at listenInCluster (net.js:1392:12)
    at doListen (net.js:1501:7)
    at _combinedTickCallback (internal/process/next_tick.js:141:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! shopapp@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the shopapp@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
 
npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Program Files\nodejs\node_cache\_logs\2018-08-28T03_29_03_820Z-debug.log


监听一个当前电脑上不存在的ip的时候，是会出现上述该错误的。比如说原来我的电脑连着一个无线网，并且检查ip地址为192.168.1.123，并且我也用该地址进行监听。但是一旦电脑断开无线网，电脑上无该ip地址，若再次用该地址进行监听，则会出现上述错误。

将这个异常名字分解开来就是E ADDR NOT AVAIL

E：Error

ADDR：Address

NOT：Not

AVAIL：Available

解决方法：查看本地IP地址是否正确 

19 提示帐户和密码错误，并且报错400 bad request

原因是前端字段类型与后端字段类型不一致
比如时间 数量 单价 价格 里数
编辑数据时input报红，原因是验证规则问题

20 URIError: Failed to decode param ‘/%3C%=h’

页面入口文件index script标签src路径有问题 h tml字母h后面多了一个空格
解决方法：去掉多余的空格

21 控制台调试出现两个重复的样式

可能element-ui第三方框架 库模板里面主题index.css文件里多写了一份css样式

 路径如下
// const url = '../../../node_modules/element-ui/lib/theme-chalk/index.css'

解决方法： 去掉UI组件默认样式里面的多余css样式

22 子路由的值必须是数组, 不然报错router.children.some is not a function

baseRoute: {
    path: '/baseManager',
    component: Layout,
    redirect: 'noredirect',
    name: 'baseManager',
    authority: 'baseManager',
    meta: {
      title: '基础配置管理',
      icon: 'setting'
    },
    children: [
      {
        path: 'userManager',
        component: _import('permission/admin/user/index'),
        name: 'userManager',
        authority: 'userManager',
        meta: {
          title: '用户管理',
          icon: 'fa-user'
        }
      },
      {
        path: 'menuManager',
        component: _import('permission/admin/menu/index'),
        name: 'menuManager',
        authority: 'menuManager',
        meta: {
          title: '菜单管理',
          icon: 'category'
        }
      },
      {
        path: 'groupManager',
        component: _import('permission/admin/group/index'),
        name: 'groupManager',
        authority: 'groupManager',
        meta: {
          title: '角色权限管理',
          icon: 'group_fill'
        }
      }
    ]
  },

23 模板标签套错，提示- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as

错误写法：
<template>
    <div></div>
    <script></script>
</template>

正确写法：
<template>
    <div></div>
</template>
<script></script>

实列上的select没有被定义，提示如下报错

Property or method "select" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

El-dropdown标签格式没有嵌套正确，提示如下报错
[Vue warn]: Injection "dropdown" not found

24 Vue js webpack模板里import路径中@符号是什么意思

resolve: {
    // 自动补全的扩展名
    extensions: ['.js', '.vue', '.json'],
    // 默认路径代理
    // 例如 import Vue from 'vue'，会自动到 'vue/dist/vue.common.js'中寻找
    alias: {
        '@': resolve('src'),
        '@config': resolve('config'),
        'vue$': 'vue/dist/vue.common.js'
    }
}

@等价于 /src 这个目录，免得你写麻烦又易错的相对路径，@这是webpack的路径别名

./代表当前项目

../代表上一级项目/是根目录

import vue1 from 'vue' 这句话的意思是： 加载vue模块，并输入变量vue1。
import后面的from指定模块文件的位置，可以是相对路径，也可以是绝对路径。如果是模块名，不带有路径，那么必须有配置文件，告诉js引擎该模块的位置。

25 字符串与对象互转

Array.toString()是将数组转化成字符串，因此不带 [ ]

JSON.stringify(Array)是从一个对象解析出JSON字符串，是带[]的

JSON.parse() 是用于从一个字符串中解析出json对象

26 注册组件时，组件名称中间需要用连字符，不然会报错

<template>
  //模板中调用组件
  <home-notice :options="options"
        :list.sync='list'
        @hidePanel='hidePanel'
        @openPanelDialog='openPanelDialog'
        @changeDrag='changeDrag'>
  </home-notice>
</template>

<script>
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
export default {
  components: {
    draggable,
    Sortable,
    'base-map': () => import('./components/baseMap')
    'home-notice': () => import('./components/homeNotice'), //引入并注册组件
    'upload-image': () => import('@/components/Upload/uploadImage')
  }
}
</script>

27 增加修改表单时，提示错误 Pre:TracePreZuulFilter

原因：传给后台的参数位置顺序放反了

28 富文本编辑内容返回的数据带标签，后台返回的数据带标签

<!-- 解决办法： 使用v-html指令解析标签 -->
 <el-table-column min-width="500" align="center" label="内容" show-overflow-tooltip>
      <template slot-scope="scope">
        <span v-html='scope.row.content'></span>
      </template>
</el-table-column>

29 <router-link :to={path:‘’,query:{}>页面跳转后新页面内容不会自动刷新

//解决办法： 增加以下路由钩子函数，当路由变化时根据id在数据库查找数据，发生create钩子函数之前
beforeRouteEnter(to, from, next) {
    next(vm => {
      console.log(vm)
      // 这里vm就是当前页面的实例，可以执行methods中方法
      if (vm.$route.params.id < 1) {
        vm.$refs.form.resetFields();
        // vm.form.imagerBase64 = undefined
        vm.dialogStatus = 'create';
      } else if (vm.$route.params.id) {
        vm.getList();
        vm.dialogStatus = 'update';
      }
    })
  }

30 vue2.0中.vue文件页面跳转传递参数并获取

//声明式标签写法 
<router-link :to="{path:'wlWaterWorkSituation',query:{id: this.listData[index].id}}"></router-link>
<router-link :to="{name:'wlWaterWorkSituation',params:{id: this.listData[index].id}}"></router-link>

//编程式js写法
this.$router.push(path:'wlWaterWorkSituation',query:{id: this.listData[index].id}})

//页面中获取参数
this.$route.query.id
this.$route.params.id
$route为当前router跳转对象里面可以获取name、path、query、params等
$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
返回上一个history也是使用$router.go方法

31 拖拽排序不起作用：拖拽元素一定要放在draggble标签内

 <draggable v-model="tags"
               :move="getdata"
               @update="datadragEnd">
        <!-- <transition-group> -->
        <div v-for="element in tags"
             :key="element.id">
            {{element.name}}
        </div>
        <!-- </transition-group> -->
</draggable>

32 MapBox介绍

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { 
attribution: '? <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map) 
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();

L.map('map')就是捕获一个<div id="map"></div>，把它当作一个地图观察器，将地图数据赋予上面。

setView设置地图中心点的经纬度和比例尺，作为用户的视图区域。

L.tileLayer就是矢量瓦片底图，用对应的URL上找对应的z，y，x。而s是分布式服务器快速选取，一般都是1-4，天地图做到了1-8。

tileLayer图层要addTo(map)加载在地图观察器上。例子当中瓦片底图使用的是openstreetmap，当然也可以使用天地图的瓦片数据作为一个家庭作业留给你们，参考htoooth/Leaflet.ChineseTmsProviders。

L.marker就是图标，首先需设置的是图标的坐标，bindPopup是绑定的冒泡提示，里面可以包装任意的innerHTML元素，openPopup是开启提示的方法。

33 无法添加class在模态框上， 设置宽度无效， 在组件上设置poper-class属性即可实现

   <el-popover placement="right" trigger="click" width="555" popper-class="popperBox">
              <base-ConfigDetailsInfo status="edit"></base-ConfigDetailsInfo> <!-- 配置信息详情 -->
              <i style="float:right;vertical-align:middle;line-height: 30px;margin-right:8px;" class="el-icon-info" @click="getConfigInfo" title="配置信息" slot="reference"></i>
            </el-popover>

34 select 设置光标位置select.selectionStart/select.selectionEnd=select.value.length

focusGet (e) {
      const select = e.srcElement
      this.$nextTick(() => {
        // 设置光标位置
        select.selectionStart = select.value.length
        select.selectionEnd = select.value.length
      })
}

35 列表页设置了缓存，详情页面的弹窗关闭后还显示遮罩层,按esc退出又可以了

原因：详情页关闭后的遮罩层是缓存列表页面弹窗的遮罩层，这个页面的弹窗状态被缓存下来了

解决方法：在跳转到详情页面之前关闭列表页面的弹窗

36 tag标题动态更改 正则表达式 当字段类型为date或timestamp时才能操作分区字段按钮，不区分大小写

解决方法：在created更改标题不更新，mounted才更新 updateTagView

const reg = /(date|timestamp)/i 

// 当字段类型为date或timestamp时才能操作分区字段按钮，不区分大小写

const reg = /^(char|varchar|decimal)$/

// 当字段类型为char或varchar或decimal时才能操作字段长度

37 测试环境路由跳转显示空白页面

解决方法：查看路由菜单文件有没有增加菜单  服务菜单有没有增加 测试环境需要手工另外增加

38  this.$set方法一次只能增加一个属性，正则表达式没有位数限制/^\d+$/

39 穿梭框控件怎么像树形控件获取当前节点上的数据信息？利用slot-scope属性接收节点上的数据（即渲染的数据）

    <el-dialog :title="title" :width="width" :visible.sync="dialogConfigDataSourceVisible" :modal-append-to-body="false" :close-on-click-modal="false" center :before-close="handleClose">
      <div class="transferWrapper">
        <el-transfer style="text-align: left;" v-model="checkedColumn" filterable :titles="['未使用数据源', '已使用数据源']" :left-default-checked="leftChecked" :right-default-checked="rightChecked" :format="{ noChecked: '${total}',hasChecked: '${checked}/${total}'}" @change="handleChange" :data="dataT">
          <span slot-scope="{ option }">
            <i style="margin-right:3px;"><img src="@/assets/images/theme.png" alt="" style="vertical-align:middle;margin-top:-4px;"></i>
            <i> {{ option.label }}</i>
            <el-popover placement="right" trigger="click" width="555" popper-class="popperBox">
              <base-ConfigDetailsInfo status="edit" :formData="formData"></base-ConfigDetailsInfo> <!-- 配置信息详情 -->
              <i style="float:right;vertical-align:middle;line-height: 30px;margin-right:8px;" class="el-icon-info" @click.prevent="getConfigInfo(option.label)" title="配置信息" slot="reference"></i>
            </el-popover>
          </span>
        </el-transfer>
      </div>
      <div class="dialog-footer">
        <el-button @click="confirDialog" class="marginR20" size="mini">取消</el-button>
        <el-button type="primary" @click="confirDialog" :loading="false" size="mini">保存</el-button>
      </div>
    </el-dialog>

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取

[外链图片转存中…(img-ZOdDD2CA-1715718874948)]
[外链图片转存中…(img-hpchlK3s-1715718874949)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上物联网嵌入式知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、电子书籍、讲解视频，并且后续会持续更新

如果你需要这些资料，可以戳这里获取