Nginx之Vue部署到子站点

日常部署过程中，时常会遇到将开发好的Vue项目部署到一个站点的子目录下，与主站点共用一个端口号，同时使用不同的目录静态资源。

当前子目录名称为D4rf，准备工作，Vue配置静态资源文件打包路径带有前缀 D4rf，打包的静态文件，通过访问通过子目录获取，打包好的静态页面内容如下：

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 / {
        # 忽略内容
        # 忽略内容
    	}
}