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要一致。