一、问题场景
日常部署过程中，时常会遇到将开发好的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 ^~/vue-dc/ {
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 / {
# 忽略内容
# 忽略内容
}
}