vue - 详解配置反向代理后，项目出现白屏的情况，js、css文件404问题解决方案（Vue解决项目白屏以及反向代理）

已于 2024-07-29 14:11:44 修改
阅读量5.2k 收藏 26
点赞数 21
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： javascript vue.js css
于 2023-12-20 10:02:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/135100881
版权
本文详细介绍了Vue项目在配置反向代理后出现白屏和js、css文件404的问题。问题源于尝试设置Axios的baseURL时遇到未定义的错误。解决方案包括检查变量定义、使用默认参数和链式表达。同时，文章提供了Vue项目中History模式404问题的解决方法，并讨论了反向代理在本地和线上部署时的注意事项，帮助开发者理解和解决此类问题。
摘要由CSDN通过智能技术生成

问题说明

添加反向代理代码后，前端运行白屏。

// 设置baseURL，8888是后端端口号，前端请求默认发送到baseURL的地址
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8888/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue
了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 21
    点赞
  • 踩
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
2021-6月面试总结-vue，uniapp，小程序，h5，更新中
m0_67266787的博客
02-24 755
**一、**vue 2.6.11 vue****页面的生命周期？ 总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在∗∗created∗∗阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在**created**阶段，vue实例的数据对象data有了，el和数据对象data都为undefined，还未初始化。在∗∗cre
nginx进行反向代理时js、css等文件无法正常加载的问题
yyiyike的博客
09-08 3698
然后重新加载nginx配置即可。原因 ： 没有配置静态资源。
解决VueCil代理本地proxytable无效报错404的问题
01-22
前言 因为项目中遇到了这个bug：Vue cil2中配置代理proxytable成功，却无效报错404，在后端和代理都配置无误的情况下，还是报404，先已解决，特记录，希望能帮助到他人； 正文 1. 为什么要使用代理？ 代理的作用是：把请求代理转发到其他服务器的中间件； 例如：我们当前主机为http://localhost:8080/，现在我们有一个需求，如果我们请求/api，我们不希望由3000来处理这个请求，而希望由另一台服务器https://www.example.org/api来处理这个请求怎么办？ 这时候就要使用代理来解决！ 2. 在vue中如何使用多个代理？ module.exp
常见报错net::ERR_ABORTED 404 (Not Found)
最新发布
2302_79523175的博客
06-06 633
但是不在node环境中就需要加上；或者在引入js 文件时添加type属性。之前在node环境中引入文件时一般都不加。一般是找不到静态资源，或者引入错误；
vue 项目配置反向代理导致项目白屏
xinqingwuji的博客
12-16 343
添加反向代理代码后，前端运行白屏// 设置baseURL，8888是后端端口号，前端请求默认发送到baseURL的地址// 全局注册，之后可在其他组件中通过 this.$axios 发送数据。
vue 项目配置反向代理导致项目白屏，js、css文件404问题解决方案
苦夏木禾
10-18 2351
项目上传到服务器后，配置反向代理后出现页面无法打开，所有的js、css文件都是404宝塔反向代理：配置文件。
vue.config.js配置proxy代理产生404错误的原因
jiaohuizhuang6019的博客
10-16 3653
vue.config.js配置proxy代理产生404错误的原因
Vue代理请求数据出现404
热门推荐
weixin_40380115的博客
12-15 1万+
Vue代理请求数据出现404错误
前端面试常见的问题（呕心沥血的总结）
weixin_43714543的博客
03-22 3471
直通金三银四，你学废了吗？1. JS的数据类型哪些?2. 变量的命名规则3.转换规则4. this的指向5.改变this指向的方式6.new操作符做什么?7.什么ajax,它的5个步骤8. get与post请求的区别?9. 什么cookie?10. cookie localStorage,sessionStorage 的区别?11. 闭包?12. 原型和原型链13. ES5 新增了哪些特性?14.es6有哪些新特性,你喜欢哪些特性? (重点的重点)15.什么是回调函数16.面向对象16.设计模式 GoF1
vue build打包后css里的图片路径404不正确的问题
Calamus
06-21 3281

 vue build打包后css里的图片路径404
 在vue-cli项目中build/utils.js中找到如下代码块，添加 publicPath:’../../’
 
 if (options.extract) {
 return ExtractTextPlugin.extract({
 use...
如何正确解决VuePress本地访问出现资源报错404的问题
01-18
背景 最近发现好多小伙伴刚用VuePress，然后一build完就直接用本地浏览器访问，结果出现黑块。仅仅出现那种问题还好，给项目安装 vuepress-plugin-serve 插件就行了， 但是如果有需求是需要离线查看 VuePress 生成后的文档呢？所以我特地研究了一下—— 解决办法 打开 .vuepress/config.js 文件，把 base 的值改成 ./，为了方便调试，最好这样写： //base: /, base: ./, 写两个，一个用于Dev，一个用于Build。 然后打开项目下的 node_modules\@vuepress\core\lib\clien
vue代理配置没问题但是报错404
onecaicai的博客
11-13 520
vue代理没错但是报错404
Vue.js - 使用History模式反向代理Nginx配置404错误
chaishen10000的专栏
06-01 2643
History模式这样不灵了，需要注意两点：#防止刷新出现404错误2、要加"/"结尾配置proxy_pass时，当在后面的url加上了/，相当于是绝对根路径，则nginx不会把location中匹配的路径部分代理走；如果没有/，则会把匹配的路径部分也给代理走（这样配置在Nginx反向代理+负载均衡简单实现（http方式）也提到过）。
vue代理配置问题,刷新页面404情况
m0_64489075的博客
10-17 135
在vue.config.js中添加以下配置。解决开发环境跨域配置问题
vue中404解决方法
每天都想吃好吃的
02-20 2271
在Vue中出现404错误通常是因为找不到所请求的资源。检查是否正确安装依赖：如果使用了第三方库或组件，确保已经正确安装了相应的依赖。检查服务器配置：如果你的Vue项目部署在服务器上，检查服务器的配置文件，例如。配置文件是否正确设置了路由重定向。确保服务器能够正确地处理所请求资源。请根据你的具体情况选择相应的解决方法。
Vue3配置代理后页面500/404
Suciy的博客
05-24 2319
base：base 是 Vite 配置中的一个选项，用于指定项目的基本公共路径。proxy：proxy 是 Vite 配置中的一个选项，用于配置开发服务器的代理转发。可以看见，vite是将base拼接的地址通过fetch加载文件，fetch是一个异步请求，如果此时base与代理地址重名，那么静态资源将会被代理到服务器，所以会出现文件找不到的问题。但是配置完后前端页面一直处于404的状态，网络请求显示500，我以为是路由的问题各种排查，甚至把官网Vue-Router的实例down下来，发现人家都是可以的。
nginx设置反向代理后端jenklins，页面上的js css文件无法加载
xiaojye的博客
03-15 520
配置环境变量。
开发和内网部署正常，反向代理后出现404和图片加载失败的解决方案；部署到公网后报错404；部署到公网后图片加载出错；动态渲染获取图片失败
RenGJ010617的博客
04-27 1275
最近在做一个项目的收尾工作时，需要将开发好的前端项目部署到服务器上，在测试和修改阶段，是部署在内网服务器上的，用来提供内部人员测试和考核，并提供优化意见。也就是说，在开发阶段和内网部署阶段都没有问题。问题就出在部署到公网的过程中，首先想用某个特定的域名，但又是独立开发的项目，所以用了反向代理，将该域名下的一个路由指向了内网服务器连接的首页。大概就是将（这里用xxx.com和127.0.0.1来代替真实的域名和ip。这样操作去做反向代理，然后就出了一堆问题。
vue-cli3项目升级实战：解决常见问题与配置
"这篇文章主要详细介绍了如何正确地将项目升级到vue-cli3，分享了作者在升级过程中的步骤和遇到的问题及其解决方案。" 在将项目从较低版本的vue-cli升级到vue-cli3时，需要遵循一定的流程以确保一切顺利进行。首先...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值