若依前端项目部署

1.得到打包文件

打包若依项目,得到dist文件夹,或npm run build:prod
若依前端项目部署_第1张图片

2.部署

方式一:tomcat部署

1.修改tomcat配置文件
若依前端项目部署_第2张图片
2.将打包文件放入webapps
若依前端项目部署_第3张图片
3.在dist文件中新增WEB-INF文件夹和web.xml文件
若依前端项目部署_第4张图片

<?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>/</display-name>
     <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>
</web-app>

4.启动tomcat并访问127.0.0.1:8080
若依前端项目部署_第5张图片

方式二:nignx静态资源代理

1.将dist放在html目录下
若依前端项目部署_第6张图片
2.配置nignx代理监听前端端口

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  120;
    gzip            on;
    
    server {
        listen       --;
        server_name  localhost;
    }
}

3.启动ngnix并访问监听端口测试
若依前端项目部署_第7张图片

你可能感兴趣的:(前端,tomcat,java)