Vue3 Nginx部署多个web项目，同端口，域名

目标：在nginx上部署两个项目，使用相同的端口，域名，

项目1： http://localhost:8080/project1

项目2： http://localhost:8080/project2

使用以上两个地址访问项目，使用history模式。

 

操作步骤如下：

第一步：修改vue.config.js 配置文件

project1：

module.exports = {
    publicPath : '/project1',
    ...
};

project2:

module.exports = {
    publicPath : '/project2',
    ...
};

注：不需要修改base，使用创建项目自带的路由，配置如下：

const router = new VueRouter({
	mode: 'history',
	base: process.env.BASE_URL,
	routes
});

第二步：

打包，将打包文件放到nginx中，本文就放到html文件夹中，如下：

 

 

 

 

 

第三步：

修改nginx.conf配置文件

server {
	listen       8080;
	server_name  localhost;

	#charset koi8-r;

	#access_log  logs/host.access.log  main;

    #项目整体文件目录
	location / {
		root   html;
		index  index.html index.htm;
	}
	
    # project1配置
	location /project1 {
		alias html/project1/;    #project1文件目录
		index  index.html index.htm;
		try_files $uri $uri/ /project1/index.html;   #需要修改的项：project1
	}
    #project2配置
	location /project2 {
		alias html/project2/;    #project2文件目录
		index  index.html index.htm;
		try_files $uri $uri/ /project2/index.html;  #需要修改的项：project1
	}
	
	location /api1 {
	   include uwsgi_params;
	   proxy_set_header   Host             $host;
	   proxy_set_header   x-forwarded-for  $remote_addr;
	   proxy_set_header   X-Real-IP        $remote_addr;
	   proxy_pass   http://localhost:9999;
	}
	
	location /api2 {
	   include uwsgi_params;
	   proxy_set_header   Host             $host;
	   proxy_set_header   x-forwarded-for  $remote_addr;
	   proxy_set_header   X-Real-IP        $remote_addr;
	   proxy_pass   http://localhost:1111;
	}
}

建议只替换project1和project2，注意目录要和Vue中的publicPath要一致。