vue 多项目部署---二级目录

2,019 阅读1分钟

新项目:同一域名下部署多个vue项目

例如:

https://www.xxxx.com/part_security
https://www.xxxx.com/api
https://www.xxxx.com/restful

前端在打包静态文件的时候需要进行以下修改:

将publicPath 改为 '/子目录名/'。

image.png

vue-router 路由文件的配置,填写二级目录

新增 base: '/子目录名/' `

新增 base:'/part_security/',

` image.png

nginx 配置以及前端资源根目录

server {
        listen 9555 ;
        server_name  localhost;

        location /yqrl/{                                              #// 后端接口代理转发
                proxy_pass  http://127.0.0.1:8000/;                   #// 后端起的服务
                proxy_set_header        Host            $host:$server_port;
                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 $scheme;
        }

        location / {
                root   /home/zhyq/test/web/dist/;
                index  index.html;
        }

        location /part_security {                                   #// 前端路径映射
            alias /home/zhyq/test/web/dist/;                        #//前端资源放置的位置
            index  index.html index.htm;
            try_files $uri $uri/ @part_security_action;             #// 解决history模式刷新后的空白的问题

     }

        location @part_security_action {                            #// 解决history模式刷新后的空白的问题

            rewrite ^.*$ /part_security/index.html last;
    }
}

访问

  1. ip加端口加二级目录
  2. 域名加二级目录