vue项目部署到tomcat、nginx

MT
NGINX
2023-04-11
617 热度
0 评论

前言

vue项目部署到tomcat、nginx时需要注意的地方，刷新404问题重定向问题等，nginx反向代理tomcat，tomcat需要处理的history模式刷新404问题等。

Vue

tomcat

根目录

// 1、hash
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "./" // 或者 "/"


// 2、history 可以不设置route base
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "/"

// 2.1、解决刷新404问题
// tomcat/conf/web.xml   web-app 标签下
<display-name>Router for Tomcat</display-name>
<error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>
// 2.2、对应目录
// tomcat/conf/server.xml  Host 标签下
<Context path="/" docBase="/www/server/tomcat/webapps/ROOT" />

非根目录

// 1、hash
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "./" // 或者 "/admin/"

// 2、history
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "/admin/"
// 线上环境路由历史模式
VITE_ROUTER_HISTORY = "/admin/"

// 2.1、解决刷新404问题
// tomcat/conf/web.xml   web-app 标签下
<display-name>Router for Tomcat</display-name>
<error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>
// 2.2、对应目录，否则刷新到根目录
// tomcat/conf/server.xml  Host 标签下 //
<Context path="/admin" docBase="/www/server/tomcat/webapps/ROOT/admin" />

nginx

根目录


// 1、hash
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "./"
// 或者 "/"

// 2、history
// 线上环境平台打包路径
VITE_OUT_DIR = "/"
// nginx.conf location / {
    try_files $uri $uri/ /index.html; # 解决刷新404
}

非根目录


// 1、hash
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "/admin/"
// 线上环境路由历史模式 VITE_ROUTER_HISTORY = "/admin/"
// 或者
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "./" 


// 2、history
// 线上环境平台打包路径
VITE_PUBLIC_PATH = "/admin/"
// 线上环境路由历史模式 VITE_ROUTER_HISTORY = "/admin/"

// nginx.conf location /admin/ {
    try_files $uri $uri/ /admin/index.html; # 解决刷新404
}

nginx 代理 tomcat


upstream admin-proxy {
  server 127.0.0.1:8080;
}

server {
  listen       1122;
  server_name  localhost;

  # 访问nginx地址 127.0.0.1:1122  # 代理到tomcat地址 http://admin-proxy/
  location / {
    proxy_pass http://admin-proxy/; 
  }

  # 访问 nginx 地址 127.0.0.1:82/admin  # 代理到 tomcat 地址 http://admin-proxy/admin/
  location /admin/ {
    proxy_pass http://admin-proxy/admin/; 
  }
}

nginx开启https代理tomcat


upstream admin-proxy {
    server 127.0.0.1:8080;
}

server {
    listen 1224 ssl http2;
    server_name tbagr.com www.tbagr.com;

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #HTTP_TO_HTTPS_START
    if ($server_port !~ 1224){
        rewrite ^(/.*)$ https://$host$1 permanent;
    }
    #HTTP_TO_HTTPS_END
    ssl_certificate    /www/server/panel/vhost/cert/tbagr.com/fullchain.pem;
    ssl_certificate_key    /www/server/panel/vhost/cert/tbagr.com/privkey.pem;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_ciphers EECDH+CHACHA20:EECDH+CHACHA20-draft:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    add_header Strict-Transport-Security "max-age=31536000";
    error_page 497  https://$host$request_uri;
    #SSL-END

    location / {
        proxy_pass http://admin-proxy/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
    }

    location /admin {
        proxy_pass http://admin-proxy/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
   }

}

总结：

hash: "./"

h5: 什么目录写什么（注意router base）