首页 > 编程知识 正文

tomcat怎么部署vue项目,npm打包前端项目部署

时间:2023-05-05 22:41:03 阅读:224922 作者:1100

1、将前端打包后的文件 内容拷贝到Tomcat的webapps下,可以直接丢入一个文件夹,访问时链接需要文件夹名称。为了链接的简洁可以直接放在ROOT下。

2、此时可能遇到的问题

一、启动后访问不到,页面F12显示如下图,那么就需要检查一下配置的访问路径是否对的。当前我是把dist文件夹放在webapp下。需要在前端代码配置一下访问路径加上dist

a、首先打包之前需要修改config文件夹下的index.js如果在webapps下创建dist文件夹作为项目包,则需要配置config/index.js文件,设置assetsPublicPath: '/dists/'这里改为这个配置之后,最后编译产生的index.html中相关路径也会带上‘/hms’,不会报404的错误了,具体的配置信息具体配置。

b、其次记得要添加404路由页面

二、vue项目路由在history模式下布置在Tomcat刷新会出现404问题,解决方案(需要根据前端的实际情况进行配置)

a、在tomcat的webapps下的前端文件夹下新建WEB-INF文件夹,并在该文件夹下建立web.xml文件,具体内容如下

b、web.xml文件内容

-

Router for Tomcat

-

404

/index.html

3、进入config 需改配置文件 server.xml 修改成自己开放的端口

4、进入到tomcat jzdxz目录下启动tomcat 对应部署系统使用不同的启动命令startup.bat / startup.sh

5、访问地址 http://localhost:19000/index.html

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。