使用同一域名或者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

Logo

前往低代码交流专区

更多推荐