nginx部署多个vue项目如何配置

使用同一域名或者ip去部署访问多个前端项目，比如域名/ip直接访问官网，域名/ip后面带路径去访问其它项目

一、 最终效果

官网访问地址: http://192.168.27.119/login
项目二访问地址：http://192.168.27.119/biz/login
项目三访问地址：http://192.168.27.119/admin/login

二、 vue项目中的配置修改

注：http://192.168.27.119/login 这个项目无需配置路径，直接打包即可。下面以项目二，通过/biz/访问作为例子

1. 打开config下的index.js文件
   将build下面的assetsPublicPath改为路径名

2. 打开 src/router/index.js 文件
添加 base: '/biz/'

3. 打开项目index.html文件，将引入的js文件路径前加上/biz/

三、nginx配置文件修改

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    error_log   /home/devtools/nginx/error.log;
    access_log  /home/devtools/nginx/access.log  main;
    location / {
        root /home/datasmith/website/html;
	    try_files $uri $uri/ /index.html;
	    index  index.html index.htm;
    }

  location ^~/admin{
		alias /home/datasmith/aicall/gld/html;
        try_files $uri $uri/ /admin/index.html;
    }

  location ^~/biz{
        alias /home/datasmith/aicall/khd/html;
        try_files $uri $uri/ /biz/index.html;
    }

}

四、重启nginx

1.查看修改的配置文件是否有误
进入/usr/sbin/目录，运行./nginx -t

2.确认修改无误后，重启nginx

在/usr/sbin/目录下，运行./nginx -c /etc/nginx/nginx.conf