this.$alert is not a function

INT_MIN

已于 2022-07-25 10:23:12 修改

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习过程中的报错文章标签： ajax 前端 javascript

于 2022-07-24 19:56:12 首次发布

本文链接：https://blog.csdn.net/INT_MIN/article/details/125963214

学习过程中的报错专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在Vue项目中使用Element UI时遇到`this.$alert is not a function`错误的原因及解决方案。错误发生是因为Vue实例在加载Element UI组件库之前就已经创建，导致Vue实例无法识别Element UI提供的全局方法。修复方法是确保Vue.js在Element UI库之前引入，即调整js文件的引入顺序。正确顺序应为：先引入Vue.js，然后是Element UI，最后是自定义的js文件。

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

1、需求

实现当用户未登录时弹出提示框

2、问题 this.$alert is not a function

在页面上引入element ui的 js 和 css 文件，提示this.$alert is not a function

<!-- 引入样式 --> 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
<!-- 引入组件库 --> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/zyz.js"></script>

3、报错原因

由于element ui 就是基于vue实现的，在引入 js 和 css 文件时，将文件置于vue的下方即可。

<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<script src="js/zyz.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> 
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>