vue项目部署到服务器上刷新出现404以及白屏的问题

最新推荐文章于 2025-06-29 19:59:59 发布
最新推荐文章于 2025-06-29 19:59:59 发布
阅读量5.4k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
文章标签： vue项目部署404 vue项目部署白屏 tomcat上部署vue项目 nginx上部署vue项目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37110439/article/details/86617144
本文介绍了在部署Vue项目到阿里云服务器后，遇到刷新页面出现404错误的解决方案。提供了针对nginx和tomcat两种环境的解决策略，包括修改项目打包配置assetsPublicPath和配置服务器的web.xml或nginx配置文件。

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

场景：最近接触了一个vue的项目，打包之后部署到阿里云服务器上之后，点击连接一级一级进页面没有问题，但是刷新页面就出现404，找了两个解决方法，供大家一起学习。(本人模拟了在nginx和tomcat的解决方法)

1，项目打包的时候index.js修改assetsPublicPath: ‘/’
在这里插入图片描述
2.如果部署在tomcat上：在tomcat的webapps下的项目中创建WEB-INF文件夹，在文件夹中创建文件web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    version="3.1" metadata-complete="true">
    <display-name>Router for Tomcat</display-name>
    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

3，如果部署在nginx上:修改nginx的配置文件，xx为项目存放的文件夹


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
vue打包js和css404，存在缓存

				
			

			

				

					小鄧同学的博客
				

				

					08-05
					
					2030
					
				

			

		

		

			
				
前言
当vue打包文件部署到线上时，会出现.js，.css文件404的情况，因为缓存原因，加载的js和css是之前的js和css，此文章用前端方法解决清除缓存的问题

1.index.html插入如下代码
  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

http-equiv

			
		

	



                

            
              



	

		

			

				
					
vue项目打包后部署服务器访问页面,Vue项目打包后,部署在服务器,访问页面出现空白一片...

				
			

			

				

					weixin_39768917的博客
				

				

					08-02
					
					1625
					
				

			

		

		

			
				
"好一似,食尽鸟投林,只剩下白茫茫大地,倒也真干净!"html''Vue项目打包后,部署在服务器,访问页面出现空白一片, 到也真干净!"vue一. Vue项目打包循序渐进的开发完程序后, 每一个厨艺精湛的程序猿都迫切的想打包部署运行. 可是, 程序猿的世界,不如意的事情,十之九九.nginx运行这个牛X的指令, 并以下图同样,即打包成功了.vue-clinpm run build 二.部署运行将...

			
		

	



              


  
              

                


	

		

			

				
					
解决Vue项目部署至服务器后报404的问题

				
			

			

				

					Sherry Tian的博客
				

				

					11-21
					
					1047
					
				

			

		

		

			
				
本文讲解了如何解决vue项目部署至服务器报404的问题

			
		

	





	

		

			

				
					
解决宝塔面板部署Vue项目出现404错误的完整指南

					
最新发布

				
			

			

				

					Java程序员_编程开发学习笔记_网站安全运维教程_渗透技术教程
				

				

					06-29
					
					1239
					
				

			

		

		

			
				
《宝塔面板部署Vue项目404错误解决方案》 摘要：本文针对在宝塔面板部署Vue项目时常见的404错误问题，特别是使用VueRouter history模式的情况，提供完整解决方案。主要问题源于服务器配置不当、静态文件路径错误或项目根目录设置不正确。解决方案包括：1）Nginx配置添加try_files规则；2）Apache配置重写规则；3）改用VueRouter hash模式。详细步骤涵盖项目打包、文件上传、权限设置和路径配置，并给出常见问题排查方法和最佳实践建议，如使用Docker部署和启用Gzip压缩

			
		

	



		

			
		



	

		

			

				
					
解决Vue项目刷新404

				
			

			

				

					挨踢星球
				

				

					09-05
					
					3570
					
				

			

		

		

			
				
如果服务器没有正确配置，当用户直接在浏览器地址栏中输入一个历史模式的URL或者刷新当前页面时，服务器可能会尝试查找与该URL对应的物理文件，而实际上这样的文件不存在。这是因为历史模式依赖于服务器配置来确保在浏览器请求的URL没有对应的物理文件时，仍然返回应用的入口文件（通常是”index.html”）。要在使用Vue的历史模式时正确配置服务器，以确保在浏览器请求的URL没有对应的物理文件时仍然返回应用的入口文件（通常是”index.html”），需要根据你所使用的服务器类型进行相应的配置。

			
		

	





	

		

			

				
					
vue.js前端部署linux 404,Vue 项目部署到服务器的问题解决方法

				
			

			

				

					weixin_35736086的博客
				

				

					05-25
					
					1088
					
				

			

		

		

			
				
相信很多小伙伴在用Vue-cli安装的脚手架开发的时候，在开发环境中项目可以很正常的运行，但是进入到生产环境，编译打包后，放入服务器，项目就不正常了，会出现空白页或者路由跳转404等问题。遇到这些问题不要慌张，正确的配置加上后端的简单配合就可以解决。如何打包基于Vue-Cli,通过npm run build来进行打包的操作如何部署将打包出来的资源，基于Vue-Cli的一般是dist目录下有stat...

			
		

	





	

		

			

				
					
Vue 项目部署到服务器后，刷新页面出现 404

				
			

			

				

					qq_41241504的博客
				

				

					08-17
					
					1291
					
				

			

		

		

			
				
Vue 项目部署到服务器后，刷新页面出现 404

			
		

	





	

		

			

				
					
详解vue 项目白屏解决方案

				
			

			

				

					01-21
				

			

		

		

			
				
在某次更新功能代码后，被反馈在一些手机上会出现白屏。经过一番探索，多管齐下解决了问题  白屏可能的原因：  es6 代码没有被编译成 es5 ；  文件打包路径错误；  运营商塞入的广告 js 服务器报错，连累项目不能...

			
		

	





	

		

			

				
					
【JavaScript源代码】Vue项目打包部署到apache服务器的方法步骤.docx

				
			

			

				

					12-29
				

			

		

		

			
				
总结来说，Vue项目部署到Apache服务器涉及的关键步骤包括：1) 使用 `npm run build` 打包项目；2) 修改 `config/index.js` 中的 `assetsPublicPath` 和 `router/index.js` 中的 `base`；3) 创建 `.htaccess` 文件并...

			
		

	





	

		

			

				
					
vue部署后刷新白屏404？前端路由模式详解（hash和history）

				
			

			

				

					hhhhhhhssss的博客
				

				

					07-12
					
					4033
					
				

			

		

		

			
				
前言
不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。
不出意外的话，我猜你用的一定是history的路由模式。
没错，这就是history中的一个问题，接下来让我们一起探索一下前端路由吧！
一、pandas是什么？
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
二、使用步骤
1.引入库
代码如下（示例）：
import numpy as np
impo

			
		

	





	

		

			

				
					
js 文件报 404 错误

				
			

			

				

					kjrim的博客
				

				

					04-30
					
					3206
					
				

			

		

		

			
				
问题：


GET http://localhost:8080/js/echarts.simple.min.js net::ERR_ABORTED 404

前端页面报404 错误，获取不到js文件

解决方式：


IDEA 不能自动编译 js 文件，通过 mvn：clean 项目之后重新启动，项目正常，错误消失。


...

			
		

	





	

		

			

				
					
解决Vue在Tomcat8下部署页面不加载的问题

				
			

			

				

					01-19
				

			

		

		

			
				
最新的项目刚刚用上Vue，遇到很多问题，在Tomcat下部署时出现了页面空白。
问题：路由 mode history 模式在 dev 模式下没有问题，在 build 模式页面空白，但静态资源能正常引用
原因：部署在Tomcat上时并没有在根目录上，而是放置在了子文件夹下面，router 无法找到路径中的组件，所以也就无法渲染了 
解决：修改 router 下 index.js 

以上这篇解决Vue在Tomcat8下部署页面不加载的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

			
		

	





	

		

			

				
					
前端vue项目部署到tomcat，一刷新报错404解决方法

				
			

			

				

					nanhooo的博客
				

				

					04-29
					
					1202
					
				

			

		

		

			
				
export default new Router({
// base: ‘/’,
// mode: ‘history’,
scrollBehavior: () => ({ y: 0 }),
routes: constantRouterMap
})
// base: ‘/’,
// mode: ‘history’,
这两个注掉，表示提交给后台处理
解决

...

			
		

	





	

		

			

				
					
 vue打包后空白页问题全记录 （background路径，css js404，jsonp等）；

				
			

			

				

					weixin_34375251的博客
				

				

					02-07
					
					196
					
				

			

		

		

			
				
总结一下vue打包后问题全记录:大部分开发者webpack基本上都是拿来就用的（并没有系统化的研究）。
一 >>>   打包之后的静态文件不能直接访问：（例如dist）打包后搭个服务器才能访问的！ 选择cd 到dist存放发目录下
 npm install http-server -g
二 >>>   ...

			
		

	





	

		

			

				
					
Vue项目服务器部署刷新页面404问题及解决

				
			

			

				

					化名三爷
				

				

					10-13
					
					1376
					
				

			

		

		

			
				
但是在服务器后端的路径配置中压根就没有 /jichu/123 ，所以后端匹配不到相应的值，就会返回404错误,。因为在vue项目开发的时候是访问自己的8080服务器,后端有进行处理，在刷新界面后找不到相对路径时，会重新渲染index.html界面，把路由的控制权交给前端，然后前端负责路由的匹配，在找到符合/jichu /123 这种格式的路由后,就会匹配成功。从而达到页面正常显示的情况.。所以在线上遇到这种情况下，我们需要后端进行相应的配置处理，在匹配不到路径的情况下重新渲染index.html 文件。

			
		

	





	

		

			

				
					
vue项目打包后，部署在服务器上出现404解决办法

				
			

			

				

					Mm_Dxx的博客
				

				

					07-04
					
					7166
					
				

			

		

		

			
				
今天把自己的vue-cli3项目打包后，在自己搭的阿里云服务器上测试时，出现页面空白，提示404，网上查了一下发现静态资源加载的问题，也就是路径出现问题。
我是把打包好的dist文件放在了nginx服务器的html文件夹下面，dist目录下有打包好的css、js、和img文件。
网上很多说是将vue.config.js里面的publicPath修改为“./”，但是我试了一下，还是不行，只显示了一个组件。然后我发现主页地址不对，按照我的配置，项目主页地址应该是http://服务器地址/dist/home，现在

			
		

	





	

		

			

				
					
vue html引入资源dev下404,webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)...

				
			

			

				

					weixin_42442651的博客
				

				

					06-04
					
					1397
					
				

			

		

		

			
				
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下一、首先修改config目录下的index.js文件将其中build的配置项assetsPublicPath进行修改，改为目的是将资...

			
		

	





	

		

			

				
					
Vue页面刷新时出现404问题   空白问题

				
			

			

				

					LSL3521的博客
				

				

					03-26
					
					944
					
				

			

		

		

			
				
Vue页面刷新时出现404问题   空白问题
原因
HTML5 History 模式引发的问题，具体为什么，Vue官方已经给出了解释，根据官方给出的解决方案原理，要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是 app 依赖的页面。详情https://router.vuejs.org/zh/guide/esse...

			
		

	





	

		

			

				
					
vue 动态路由 addRoutes 刷新页面404（空白）

					
热门推荐

				
			

			

				

					huangruifeng的博客
				

				

					06-03
					
					1万+
					
				

			

		

		

			
				
vue开发页面，通过addRoutes实现动态路由的添加，但是在进入对应页面的时候刷新时跳转到404或空白，最后发现只需把空白页面跳转直接加载到动态路由后面即可解决，代码如下：
   1：静态路由中注释掉{ path: '*', redirect: '/404', hidden: true }（如果有）
   2：在动态路由中push上面注释掉的路由，asyncRoutes.push({ p...

			
		

	





	

		

			

				
					
vue项目部署服务器方法

				
			

			

				

					05-09
				

			

		

		

			
				
<think>好的，用户想知道如何将Vue项目部署到服务器的最佳实践。我之前已经处理过类似的问题，现在需要结合提供的引用信息来组织答案。首先，我需要确认用户的需求是明确的：他们需要一个步骤清晰的指南，涵盖构建、配置服务器、上传文件等关键步骤，可能还涉及常见问题的解决方案。

根据引用[1]、[2]、[4]，用户提到的步骤包括构建项目、安装Nginx、配置服务器。引用[4]还提到了子目录部署和路由配置，这点很重要，可能需要详细说明。引用[3]和[5]提到了云服务器相关的设置，比如容灾演练和委托配置，但看起来这些可能不是用户当前主要需求，不过可能需要提到服务器权限和路径设置。

我需要确保步骤逻辑清晰，分步解释。例如，先构建项目生成dist目录，然后配置Nginx，处理可能的路由问题，比如History模式导致404，需要Nginx的配置。另外，引用[4]中提到的base路径设置对于子目录部署很关键，需要举例说明如何在vite或vue.config.js中配置。

可能还需要注意事项，比如服务器权限、防火墙设置，以及HTTPS配置，这些虽然引用中没有详细提到，但作为最佳实践应该包含。此外，常见问题如白屏问题可能由路径错误引起，需要检查资源路径是否正确。

最后，生成相关问题，比如部署后出现404怎么办，如何优化性能，使用Docker部署等，这些能帮助用户进一步解决问题。需要确保问题相关且有用，覆盖用户可能遇到的后续疑问。</think>### 将Vue项目部署到服务器的最佳实践  
以下是基于Nginx部署的标准化流程，结合常见场景和问题解决方案：

---

#### **一、部署前准备**
1. **本地项目构建**  
   运行 `npm run build` 生成 `dist` 目录（包含优化后的静态文件）[^4]。  
   ```bash
   npm install  # 确保依赖完整
   npm run build
   ```

2. **服务器环境要求**  
   - 安装Nginx并确保服务已启动[^1]  
     ```bash
     sudo apt update && sudo apt install nginx -y
     sudo systemctl start nginx
     ```
   - 开放HTTP/HTTPS端口（默认80/443）[^3]

---

#### **二、部署步骤**
1. **上传文件到服务器**  
   - 通过SCP/FTP工具将 `dist` 目录上传至服务器（如 `/var/www/vue-project`）[^5]  
     ```bash
     scp -r dist/ user@server_ip:/var/www/vue-project
     ```

2. **Nginx配置**  
   - 编辑站点配置文件（如 `/etc/nginx/sites-available/vue-app`）：  
     ```nginx
     server {
         listen 80;
         server_name your_domain.com;

         root /var/www/vue-project;
         index index.html;

         location / {
             try_files $uri $uri/ /index.html;  # 解决Vue路由History模式404问题[^4]
         }
     }
     ```
   - 启用配置并重启Nginx：  
     ```bash
     sudo ln -s /etc/nginx/sites-available/vue-app /etc/nginx/sites-enabled/
     sudo nginx -t && sudo systemctl restart nginx
     ```

---

#### **三、高级配置**
1. **子目录部署**  
   若需部署到子路径（如 `/demo`）：  
   - Vue项目配置：  
     ```javascript
     // vite.config.js 或 vue.config.js
     export default defineConfig({
       base: '/demo/'
     })
     ```
   - 路由同步调整：  
     ```javascript
     const router = createRouter({
       history: createWebHistory(import.meta.env.BASE_URL),
       routes
     })
     ```
   - Nginx配置调整：  
     ```nginx
     location /demo {
         alias /var/www/vue-project;
         try_files $uri $uri/ /demo/index.html;
     }
     ```

2. **HTTPS配置**  
   使用Let's Encrypt免费证书：  
   ```bash
   sudo apt install certbot python3-certbot-nginx
   sudo certbot --nginx -d your_domain.com
   ```

---

#### **四、常见问题解决**
| 问题现象               | 解决方案                                                                 |
|------------------------|--------------------------------------------------------------------------|
| 页面白屏               | 检查Nginx的`root`路径是否正确，确认资源文件权限为`755`[^3]               |
| 路由刷新404           | 确保Nginx配置包含`try_files $uri $uri/ /index.html;`[^4]                |
| 静态资源加载失败       | 检查`base`配置是否与部署路径一致，或使用绝对路径引用资源                 |

---

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值