vue项目打包部署到tomcat或nginx服务器

本文详述了如何避免Vue项目在Tomcat或nginx服务器上部署后URL访问出现404错误,包括修改路由配置、项目路径设置及服务器错误页面重定向策略。

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

vue项目部署到tomcat或nginx服务器url访问不报404

一.vue项目配置

查了不少资料网上关于vue项目打包部署到tomcat或nginx服务器没有详细的介绍,特写本篇文章一做总结。以下是详细步骤

1.修改项目中router/index.js

// 找到路由所在路径,具体路径有些项目不相同
export default new Router({
    //一定要在路由中添加下面代码
    mode: 'history', // 后端支持可开  作用是去掉路由中的#号,默认是hash即是路由中有#号
    base: 'admin',//项目名称tomcat webapp 目录下应该建该目录结构
})

2.修改项目中config/index.js

// 修改build下的配置
assetsPublicPath: '/admin/', 

二 .部署项目到tomcat服务器

1.tomcat webapp目录下创建文件夹

1.在webApp目录下创建admin文件夹
2.把vue打包的dist目录下的文件copy到admin目录下

2.配置Tomcat 服务器

在tomcat的config目录下的web.xml下添加以下代码
  <display-name>webapp</display-name>
  <description>
       webapp
  </description>
  <error-page>  
     <error-code>404</error-code>  
     <location>/</location>  
  </error-page> 
注意:该步骤代码是为了让在用url链接访问时不报404错误

三.部署项目到nginx服务器

1.创建nginx项目目录

1.在nginx服务器中/user/local/nginx/html目录下创建admin文件夹
2.把vue打包的dist目录下的文件copy到admin目录下

2.配置nginx

   server {
        listen       8888; 监听端口号
        server_name  10.45.4.218; #项目部署的服务器的ip地址
       
	   location /admin { #访问到admin项目的根路径
            root   /usr/local/nginx/html;
            index  index.html index.htm;
			try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
        }

        location @router  { #指向路由防止刷新报404
            rewrite ^.*$ /admin/index.html last;
        }
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
注意:该步骤代码是为了让在用url链接访问时不报404错误
admin为项目名称是自己取的,可以改成其他的,但上述三个步骤中的该admin要相同
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值