关于nginx 部署vue项目无法访问到接口出现404问题及跨域问题(已解决)

nginx部署vue项目并访问后端接口遇到Uncaught (in promise) Error: Request failed with status code 503 今天在一台阿里云上部署了springboot后端，并测试通过。 但是在部署vue项目到nginx后，发现无法成功访问后端接口。 后来发现是因为我的vue api地址填的是localhost。虽然是部署在同一台服务器上，但是这样子会报错，提示503服务不可用。 虽然在后端部署的时候，后端配置可以直接填localhost去请求同一台服务器

vue本地正常打包部署后接口返回404错误

2022年5月30日19:06:00 nginx vue项目配置 server { listen 9888; server_name 127.0.0.1; error_log /data/log/nginx/houtai-error.log; access_log /data/log/nginx/houtai-ac...

【代码】vue项目打包发布到Nginx后无法访问后端接口解决办法。

一、打包项目   1.在项目中的package.json上右键，点击Show npm Scripts 2.打包（或者直接在项目根目录运行 npm run build 命令） 3.成功后会在项目根目录生成dist文件夹   二、压缩并上传项目到服务器（我这里是使用SecureCRT工具进行上传和部署项目的）  SecureCRT版本信息如下： 1.压缩文件 2.上传文...

解决所有遇到的问题！同一个nginx部署多个项目、页面空白问题、页面刷新404问题、在vite.config.js中配置跨域代理访问不了后端接口问题等等

这里就不解释什么是跨域了。 跨域是前端最头疼的事情，它阻止了我们向后端请求数据，使之我们无法拿到数据去渲染。 当然，后端可以解决跨域，而且相当简单。但是如果再后端没办法的情况下，前端如果处理这种问题呢？ 一：开发环境下（就是vue项目本地开发，没打包部署前） 1、vue cli2.x (npm run dev运行的项目)： 我们可以在config文件夹中找到webpack的配置文件，其中...

通过本文，我们深入探讨了如何使用Nginx部署前端Vue项目。从准备工作、构建Vue项目、上传静态文件到服务器、配置Nginx，到测试并重新加载Nginx，再到高级配置和常见问题与解决方案，我们一步步地完成了整个部署过程。希望这些内容能够帮助你顺利地将Vue项目部署到Nginx服务器上，并在实际工作中进一步优化部署方案。

1、部署后，打开地址可以看到，但是刷新后出现404。 2、Vue的路由资源并不一定是真实路径，导致页面无法跳转或其他资源加载问题。3、请求后端接口地址失败。

常见的使用场景是在单页应用程序（SPA）中，将所有请求都指向主页（如 index.html），然后由前端路由进行处理。这个配置将 /redirect-me 路径的请求重定向到 http://example.com/new-location，并使用 permanent 参数表示永久重定向。你需要将 /path/to/your/static/files 替换为实际的静态文件路径。这个配置将把所有 /old-path/ 开头的请求重写到 /new-path/，并将原始路径中的内容保留。# 指定静态文件的根目录。

先看一组错误案例： #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #error_log logs/error.log info; #pid logs/nginx.pid; events { worker_connections 1024; } http { include mime.types;

【代码】Docker下安装Nginx并部署Vue项目及接口。

##2、所有得接口路径都加上/api/(可换做其他的)，我使用得是axios封装得。axios工具类中添加。###4、修改nginx得配置文件，nginx-1.24.0/conf/nginx.conf。上面的nginx中得所有注释使用 ”#“ 不是// 我是用//是因为写文章改的。###3、将打包文件拷贝到nginx得html文件下.###1、vue项目设置。

将vue项目通过npm run build打包，会自动生成一个dist文件夹，未出现刷新项目即可。 这里通过linux宝塔面板进行上传发布操作，服务器用的阿里云服务器，关于阿里云服务器安装宝塔linux面板直接按照宝塔官网进行操作即可。 在/www/wwwroot文件下创建一个项目文件夹dist,将打包好的dist文件夹压缩上传到服务器中，并解压到刚才创建的dist文件夹下。 创建站点，进行访问 然后在浏览器输入刚才填写的访问域名即可访问项目首页，此时会发现我们前后端分离的vue项目..

后端是在服务器本地部署的,nginx是在容器中运行的,前端再用localhost或者127.0.0.1是肯定错的,容器本身也就像是个虚拟机,用localhost只能访问容器里的内容

nginx是一款优秀的web反向代理服务软件。将打包好的dist前端项目，基于nginx完成部署上线。

这时候可以去任务管理器中查看 是否启动成功，成功可以在任务管理器进程中看到。这个是我的配置，大家可以查看上面 第3 步 配置的具体是什么。可以看到successful 配置成功。6. 在浏览器中访问配置的路径。4. 去cmd中检查一下配置的文件，访问之后再次刷新页面会报404。5. 启动 Nginx。

说明： 我们环境分测试和生产环境，不同环境请求的接口不同，需要在config里进行配置，现在的做法是配置一个常量，每次加在请求的接口上，每次发布都会打一个包，根据包丢的环境不一样服务器会自动加载不同环境的接口再拼上常量，同时也会解决掉一个报错。 报错： （貌似和打包有关，之前dev环境的没有打包，直接从master分支拉取的，生产的没有报错） 解决方案：如图： Dev: 生产：...