vue打包后nginx部署打开白屏，查看net发现资源地址错误（nginx同80端口部署多个vue项目）

最新推荐文章于 2025-06-17 16:37:03 发布
最新推荐文章于 2025-06-17 16:37:03 发布
阅读量2.7k 收藏 2
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 分享 文章标签： vue.js nginx javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CHENC0518/article/details/127140596
本文介绍了解决在同一80端口下部署多个Vue项目的问题，通过修改vue.config.js文件中的publicPath配置来区分不同的项目，并给出了一个具体的nginx配置示例。

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

1.导致这种原因，首先判断自己是不是在80端口，部署了一个vue项目

2.如果要在80端口部署多个vue项目，就必须对vue中vue.config.js文件进行修改。

3.需要将publicPath修改为要访问的域名后面跟的路径publicPath: '/vision/'。

4.比如我的nginx配置为

 5.好了完美解决。

【Nginx】解决在Nginx+Vue部署多个前端项目，二级目录不能访问、访问空白的问题
走在搬砖的路上！
01-31 5629
解决在Nginx+Vue部署多个前端项目，二级目录不能访问、访问空白的问题
nginx部署多个vue项目的方法示例
10-14
在本文中，我们将深入探讨如何使用Nginx部署多个Vue.js项目。这通常在需要在同一域名下运行多个独立的应用程序时变得必要。我们将通过一个具体的示例来展示配置过程。 首先，我们的目标是在同一个域名下部署两个Vue...
nginx 部署vue项目，页面白屏或者页面刷新出现404问题
qq_52700250的博客
06-22 1万+
解决在nginx 部署vue项目时，页面白屏或刷新出现404问题
Vue 应用的首屏白屏问题
m0_51429350的博客
06-17 399
查看浏览器控制台是否有 JS 报错；检查网络面板确认资源是否加载成功；确保 Vue 实例正确挂载到#root；检查路由配置是否正确；处理异步加载逻辑避免空白；如使用 SSR，确认服务端渲染是否正常。
vue项目打包发布到Nginx后无法访问后端接口解决办法
weixin_42485732的博客
03-30 8863
【代码】vue项目打包发布到Nginx后无法访问后端接口解决办法。
vue-cli打包到部署到nginx服务器
weixin_34192816的博客
07-06 2117
最近公司把云平台产品用vue 前后端分离的框架来写，前面大部分开发都比较顺利，后面打包部署出了bug 现在记录下自己遇到的哪些坑 1，我直接npm run build 打包出来，打开dist目录下面的index.html 空白页，页面上出现  no "NODE ENV"是我打包时没有指定打包到哪个环境 正确打包是 npm run build:prod   2.关于vue-router 中...
Nginx下同域部署多个Vue项目（history路由模式），报404、500错误
hwijew的博客
04-11 6325
一、环境 系统: windows nginx: 1.20.2 nodejs: v10.24.0 npm: v6.14.11 @vue/cli: 4.5.13 二、问题描述 新建Vue项目的时候，如果选择hash模式的话，地址上都会带一个#号，本人嫌太丑，选择了history模式，到了部署项目的时候，刚好又需要多个项目部署在一起。部署完发现：① js、css文件找不到、② 页面报404、③ 页面报500。 三、解决方案 1、修改vue项目中的vue.config.js文件 a项目增加以下内容： module.
Vue打包部署到Nginx时,css样式不生效的解决方式
10-15
在Vue项目开发中，使用Vue CLI构建应用后，通常会通过`npm run build`命令生成一个用于部署的dist目录。然而，在将这个dist目录部署到Nginx服务器时，可能会遇到CSS样式不生效的问题。这个问题通常与静态资源的路径...
Nginx部署多个Vue项目详细方法示例
最新发布
07-02
今天因公司需求，要在同一域名端口下部署两个 web 项目，经过一上午的努力，终于搞定，特此记录。连接阿里云服务器的方法这里不再赘述，可参考我之前的文章。 目标是实现访问http://47.97.244.83/login和...
Vue中跨域及打包部署到nginx跨域设置方法
10-16
本文将详细介绍Vue项目开发中遇到的跨域问题及其解决方法，以及如何将打包后的Vue项目部署到Nginx服务器，并设置跨域。 ### 跨域问题的概述 跨域问题是指由于浏览器的同源策略限制，前端项目中的JavaScript代码...
Vue部署至服务器步骤以及出现白屏,只有空白主界面和网页标题
qq_53208462的博客
03-22 8335
★:出现白屏问题主要出现于初次布置nginx目录下有默认的50.html和index.html把他们删除之后将dist所有文件拷贝至nginx/html路径下即可 1.npm run build 2.可以通过宝塔Linux面板一键安装nginx(可以搜搜怎么安装宝塔 很简单),之后配置 server { listen 80; //你的服务器端口 server_name 你的服务器地址; location / { root
【踩坑】：vue项目打包，用nginx部署了，但是访问不到页面
热门推荐
TanMengyi的博客
06-15 1万+
最近做的一个vue项目，npm run build打包后，用nginx部署， 打开默认地址： 域名/gcmanager/，跳到了我配置的404页面，如下图： 于是我手动输入页面的路由地址，我本地这个路径都能访问到页面，为部署后却找不到页面了， 这是我路由的index.js文件 分析问题： nignx，需要配置history模式，解决办法有两种： a. 取消路由的 history 模式，把mode:"history"去掉 b.nginx配置location / { try_files $uri $
vue部署nginx无法访问服务端端问题
ganshengcai的博客
05-04 1679
nginx的配置文件nginx.conf配置后台地址代理的时候，代理名称前后都要加/,如图中‘/rest/’;ip + 端口号，后面也要加/。然后保存重新加载配置文件，或者重启nginx即可访问正常。 因为代理名称和服务后台代理没加/，导致花了很多时间去找问题。 ...
vue项目打包放到Nginx服务器上无法访问后端
weixin_43972091的博客
03-17 7130
dev模式下完全没问题，build模式可以访问首页，点击登录一直报404 点击登录之后是这样的，请求的/api/auth/jwt/token是对的，但是默认访问的是Nginx的80端口，我需要访问的是8765端口 但是我在prod.env.js里配置的后端IP地址和端口号是http://localhost:8765 请问一下大神们这该怎么修改配置 ...
Nginx部署vue项目, 无法直接访问其他路径的解决方案
2303_79299383的博客
06-05 1172
Nginx部署Vue项目时，若无法直接访问非根路径（如刷新404），需添加try_files $uri $uri/ /index.html配置。该问题源于Vue作为单页应用（SPA），前端路由需通过index.html处理，而Nginx默认会查找物理文件。解决方案让所有路径请求回退到入口文件，配合Vue Router的history模式使用。扩展内容包括Nginx安装、配置测试、SSL证书设置及反向代理示例，适用于SPA路由维护和静态资源优化场景。
vue使用了代理跨域，部署上线，使用Nginx配置出现问题，访问不到后端接口
qq_63462564的博客
07-19 1152
踩坑就在这个api这，本地的话我后面没加斜杠，然后target也没加斜杠，是能访问到后端接口的。但是nginx好像不行，我还不知道原因，有大佬知道的在评论区和我说下，大家互相学习，保险起见一定要给api前面后面都加上/，然后proxy_pass也是最后加个斜杠。1、如果路由的mode是history模式的要加上框框里的哪句，然后配置下面的location @router。2、然后是要配置proxy，这个api根据自己来。
【问题】Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题和Nginx部署vue项目访问不了接口
Trees__的博客
11-24 5710
【问题】Nginx部署vue项目进行跳转二级路由报404无法找到目标页面问题和Nginx部署vue项目访问不了接口
vue3 项目打包后白屏
L_C_sunny的博客
07-24 2172
根据Vue3.x文档，在 vue.config.js/vite.config.ts 统一对webpack、跨域、端口号等属性进行配置。1.在 vue.config.js/vite.config.ts添加publicPath属性并将值更改成 ‘./’2.若还没有解决就去路由中将history模式设置成默认的Hash模式，一般是服务器后端配置之后才使用history。一般建议默认的Hash模式。
Vue开发问题——打包后首页白屏，cli3设置vue.config.js 使用proxy配置跨域
Lazy33的博客
11-04 2039
关于Vue项目打包后白屏问题的处理步骤
nginx 部署多个vue项目不同端口
11-10
Nginx部署多个Vue项目并指定不同端口，可以通过配置虚拟主机（Virtual Hosts）来实现。以下是基本步骤： 1. **配置文件编辑**: 打开Nginx的配置文件，通常是`/etc/nginx/nginx.conf`，找到server块部分，然后添加一个新的server配置，每个配置对应一个Vue项目的运行环境。 ```nginx server { listen 8080; # 示例中的第一个Vue项目监听8080端口 server_name example1.com; root /path/to/vue1/public; # Vue项目1的静态资源路径 index index.html; location / { try_files $uri $uri/ /index.html; } } server { listen 8081; # 示例中的第二个Vue项目监听8081端口 server_name example2.com; root /path/to/vue2/public; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 2. **域名映射**: 每个server块中的`server_name`应该替换为你实际的域名，确保Nginx能接收到请求。 3. **重启服务**: 修改完配置后，需要重启Nginx以应用新的配置： ``` sudo systemctl restart nginx ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值