一、问题场景
日常部署过程中，时常会遇到将开发好的Vue项目部署到一个站点的子目录下，与主站点共用一个端口号，同时使用不同的目录静态资源。
二、解决方案
当前子目录名称为D4rf，准备工作，Vue配置静态资源文件打包路径带有前缀 D4rf，打包的静态文件，通过访问通过子目录获取，打包好的静态页面内容如下：
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <meta base=/D4rf/ ><link rel=icon href=/D4rf/favicon.ico> <title>数据处理</title> <link href=/D4rf/static/css/chunk-28393036.e37ecdeb.css rel=prefetch> <link href=/D4rf/static/css/chunk-3c6794a0.cb2d43de.css rel=prefetch> </head> <body> <noscript></noscript> <div id=app></div> <script src=/D4rf/static/js/chunk-vendors.acf9d8ad.js></script> <script src=/D4rf/static/js/app.cba52f1c.js></script> </body> </html>
Nginx配置逻辑为子站点仍然是需要单独使用一个独立端口进行部署，只是在主站点下通过匹配配置，进行请求转发处理。
子站点配置如下：
server { listen 10001; server_name localhost; location / { root 站点文件物理路径;#站点静态文件物理路径，右斜杠 \ 写为左斜杠 / index index.html index.html; try_files $uri $uri/ /index.html; #加上这一行 } }
主站点配置如下：
server { listen 10002; server_name localhost; #charset koi8-r; access_log logs/xxxx.access.log; error_log logs/xxxx.error.log; # 忽略内容 # 子站点 location ^~/D4rf/ { proxy_redirect off; 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_pass http://127.0.0.1:10001/; } location / { # 忽略内容 # 忽略内容 } }
