Vue 安装 配置axios 后页面一片空白

最新推荐文章于 2023-07-07 15:29:18 发布
置顶 最新推荐文章于 2023-07-07 15:29:18 发布
阅读量2.1k 收藏 2
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47587864/article/details/109487537
版权
在Vue项目中引入并配置axios后，页面显示为空白。这可能是由于配置错误或者axios与Vue的集成出现问题所导致。解决方法包括检查axios的安装是否正确，导入路径是否准确，以及确保配置文件中没有冲突的设置。同时，确认Vue组件中的数据请求是否在正确的生命周期钩子函数中执行，如`created()`或`mounted()`。排查这些常见问题通常能有效解决页面空白的问题。
摘要由CSDN通过智能技术生成 
在这里插入图片描述
造成 这个问题的原因有很多

一、
javascript Uncaught TypeError: Cannot set property '$axios' of undefined
在这里插入图片描述
报错信息说 $axios of undefined

我们打开 main.js 查看

在这里插入图片描述
将箭头所指处 改为小写。

二
TypeError: setting getter-only property "$axios"

vue-cli2 和 vue-cli3和4 安装方法还不一样，我使用的是 vue-cli4.3.1，应使用npm add axios，vue-cli2.
最低0.47元/天 解锁文章
Hik-hairi
关注
记录：vue中使用axios添加了babel-polyfill和es6-promise在ie下依然app.js报错页面一片空白的解决办法
qq_30068989的博客
11-20 4779
最近一个vue开发的项目，事先已经兼容ie9+，但是最后写完整个项目后chrome，firefox下完美运行，可是用ie的时候却一片空白？？？？？网上找了很多方法都是已经做好的ie兼容babel-polyfill、es6-promise。但是为什么还是不行？？ 好吧点进去看看 => 最后一行看到了是在自己写的请求文件mainPublic.js里出问题了，去看了一下代码 发现原来是axio...
Vue安装axios后页面空白问题
Clay的博客
05-15 3120
问题   在使用npm install axios安装了axios，并在main.js中配置完成之后，启动Vue项目，访问页面为空白，查看页面元素，控制台报红TypeError: setting getter-only property "$axios"，在参考某篇文章之后解决问题。 解决 1.安装   vue-cli2和vue-cli3和4安装方法还不一样，我使用的是vue-cli4.3.1，应使用npm add axios，vue-cli2.0使用的是npm install axios。 2. 配置(我
vue项目兼容ie浏览器(出现白屏)
weixin_45526332的博客
08-26 863
vue项目兼容ie浏览器(出现白屏)
Vue 刷新后页面空白，报Uncaught SyntaxError: Unexpected token的问题
ITKouSyou的博客
06-17 8921
问题现象 问题原因： js文件正确的应该是 解决方法： 添加上publicPath再发布一次就好了。
vue3 script setup下axios请求 页面为空白
zjy9951的博客
07-18 2570
解决方法 在Vue3中，如果当前组件的setup使用了async/await，那么其调用组件的父组件的外层需要嵌套一个suspense标签， 原文地址 代码 //父组件app.vue <template> <img alt="Vue logo" src="./assets/logo.png" /> <suspense> <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" /> </sus
Vue 2.0在IE11中打开项目页面空白的问题解决
12-09
然而，由于Internet Explorer 11（IE11）浏览器对新特性的支持不足，开发者在使用Vue 2.0进行开发时可能会遇到兼容性问题，导致在IE11中打开项目页面出现空白的情况。本篇文章将详细讨论如何解决这个问题。 问题的...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
如果Vue项目的`assetsPublicPath`配置为绝对路径`/`，则在刷新浏览器或直接访问子路由时，资源路径将不正确，导致页面空白。 针对这个问题，网上流行的解决方案是将`assetsPublicPath`改为相对路径`./`。这样做的...
vue-cli3打包上线时遇到的坑（打包后页面空白、接口404、进入二级页面刷新404）
热门推荐
qq_37021104的博客
12-20 1万+
前言: 刚开始以为打包上线挺简单的，不就是 cnpm run build打包然后把代码往服务器一扔吗。但是打包后发现遇到了各种问题，首先就是页面空白的问题，页面空白有两个原因，第一个是因为路径找不到造成的页面空白，第二个是渲染问题。其次就是后台接口404错误。在这里，我会建一个新的vue3项目，来重新走一遍打包时遇到的坑。 vue3打包上线后页面空白 vue3打包上线后调用后台接口...
Vue2空白界面，报错：Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)
m0_48367189的博客
07-25 1382
Vue2空白界面，Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)
vuecli3 项目在 ie11 下面白屏报错：SCRIPT1002: 语法错误
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
03-15 908
SockJS是一个浏览器JavaScript库，提供类似WebSocket的对象。SockJS为您提供了一个连贯的、跨浏览器的Javascript API，它在浏览器和web服务器之间创建了一个低延迟、全双工、跨域的通信通道。如果失败，它可以使用各种特定于浏览器的传输协议，并通过类似WebSocket的抽象来呈现它们。安装好之后最后记得清除一下 ie11 浏览器的缓存，不要像我一样，安装好后排查了半天，最后发现是缓存问题，ie 浏览器还是用的。然后定位的位置如下：说明。这个库的版本目前使用的是。
用axios获取数据后无法显示数据在列表中
weixin_45766506的博客
04-25 2327
TO用axios获取数据后无法显示数据在列表中 html代码： json代码： 以上的代码的效果图如下图： 再看看下面的图： 到这里我之前就很迷，为什么这里明明获取了数据了，但是li节点就是不显示出来呢，问题就在这个this上面： 我犯了一个错误，就是以为这里的this是直接指向vm对象的，但是实际上这里并不是，当我加上下面的代码： console.log(this) 答应出来这里却是...
解决VUE线上报错 Uncaught SyntaxError:Unexpected token …… 刷新后页面白屏
秋实的博客
04-26 4487
最近发现router在history模式下，二级以上页面刷新后会出现白屏并且报错，如下图： 最终查到方法重新打包完美解决： const webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.build.productio...
关于axios中'$router' of undefined问题
hjhfreshman的博客
05-10 2295
在使用axios进行请求里，我们一般用this.$router.push(’’)的方法进行路由跳转： this.$axios.post("/auth", { 'username': this.username, 'password': this.password }).then(function (res) { this.$route...
VUE使用axios数据请求时报错 TypeError: Cannot set property ‘xxxx‘ of undefined 的解决办法
小猫爪子
11-11 2536
VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property ‘xxxx’ of undefined 的解决办法 正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现，数据可以请求到，但是会报错 TypeError: Cannot set property ‘listgroup’ of undefined 主要原因是： 在 then的内部不能使用Vue的实例化的this, 因为在内部 this 没有被绑定。 可以看下 St
vue3和axios打起来报错uncaught typeerror: cannot read property ‘use‘ of undefined at...的详细解决方案
weixin_53156322的博客
03-11 3018
本文实乃匠心之作，全程干货，希望能帮到大家。 在做springboot整合vue的前后端分离项目时遇到此问题。 搜了一下，别人是这样说的：根本原因是 引入的axios库是使用vue2.0开发的一套组件库，而我们当前的项目为vue3，所有存在兼容性的问题。 网上的解决方案也都试了一遍，问了前端的小伙伴他也不知道，但是它建议我用vue2再来，我不服，没人踩这坑，我拼了半条命也要给他填了。 首先，如果你是简单的项目，axios调用也只有一个弹窗测试，那么你可以这样做。 注释掉就可以了，你就会发现可以用。
Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符
Mr.小灰狼_随笔
07-07 3205
Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符 背景 ：Vue2 项目在谷歌浏览器运行好好的，在 IE 浏览器打开就会出现各种的问题。。
axios的使用,报错解决及封装请求模块
Orange71234的博客
07-07 1693
解决code ERESOLVE ERESOLVE could not resolve
vue怎么配置axios
最新发布
07-10
Vue.js 配置 Axios 主要是为了在项目中统一处理 HTTP 请求，让数据交互变得更加方便。以下是一个基本的步骤： 1. **安装 Axios**： 使用 npm 或者 yarn 安装 Axios，命令如下： ```bash npm install axios // ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值