vue cli3+ history模式在nginx部署至子目录（二级目录或多级目录）配置

假如我们部署到线上的访问的地址是  http://localhost:8080/admin/  那这里的子目录就是  /admin/

1、在 router/index.js 中设置base属性，值就是子目录  /admin/

mode: 'history',
base: '/admin/',

2、修改  vue.config.js  中的  public  ，打包部署时设置为  /admin/，  开发时默认设置为  /  根目录

public: process.env.NODE_ENV === 'production' ? : '/admin/' : '/'

3、部署时，通过NGINX的反向代理

首先，给需要部署的项目定义一个 NGINX 的 server

server {
	listen 8001;
	
	location / {
        # vue h5 history mode 时配置
        try_files $uri $uri/ /index.html;
    
        root /home/dist;  # 打包后的dist文件夹目录
        index index.html index.htm;
	}
}

再到配置域名的主配置server上做反向代理

server {
	listen 80;
	server_name localhost;
	
	location / {
		index index.html index.htm;
	}
	
	# 这里是需要部署的二级目录应用配置
	location ^~/admin/ {
		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:8001/;
	}
}

注意：nginx配置文件修改后记得重启nginx

nginx -s reload