nginx一个端口部署多个vue项目

vue.config.js中publicPath参数配置

/**
 * publicPath参数官方说明：
 * 部署应用包时的基本 URL,  默认情况下，Vue CLI 会假设你的应用是被部署在一个域名的根路径上例如 https://www.my-app.com/。
 * 如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.my-app.com/my-app/，
 * 则设置 publicPath 为 /my-app/。
 */
 module.exports = {
   publicPath: process.env.NODE_ENV === 'production' ? '/archives/' : '/',
 }

路由中base参数配置

/**
 * base参数官方说明：
 * 应用的基路径，默认情况下为 '/'
 * 例如，如果整个单页应用服务在 /app/ 下，然后 base 就应该设为 "/app/"
 */
const router = new VueRouter({
    mode: 'history',
    base: process.env.NODE_ENV === 'production' ? '/projectName/' : '/',
    routes
})

index.html中配置meta

<meta base=/projectName/ >

nginx配置,conf目录下nginx.conf文件

 server {
        listen       8080;
        server_name  localhost;
        client_max_body_size 20m;
		add_header X-Xss-Protection "1; mode=block";
		add_header X-Content-Type-Options 'nosniff';
		
		#配置根路径，html, rewrite：重定向到默认项目
        location / {
            root html;	
            rewrite ^/(.*)$ /projectName permanent;
        }
		# projectName项目文件夹要放在html目录下
		location ^~ /projectName {
            try_files $uri $uri/ /projectName/index.html;
        }
		# projectName2项目文件夹要放在html目录下
		location ^~ /projectName2 {
            try_files $uri $uri/ /projectName2/index.html;
        }
		# 服务代理转发
        location /api/ {
            proxy_pass http://ip:port/;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

projectName项目访问路径：http://ip:8080/或http://ip:8080/projectName
projectName2 项目访问路径 http://ip:8080/projectName2