this.$alert is not a function

原创已于 2022-07-25 10:23:12 修改 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端 #javascript

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

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

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文件。

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>