Nginx 配置同域名访问多个 vue 项目

vue 端配置二级目录

首先，配置vue.config.js，项目打包时，资源访问路径从根目录'/xx.js'变为'/client/xx.js'

publicPath: '/client',

然后，配置 Router 文件，路由访问地址从根目录'/'变为'/client/'

new Router({
    // 路由模式
    mode: 'history',
    // 
    base: '/client',
})

线上环境配置Nginx

编辑 nginx.conf，添加一个虚拟目录

http {
    …
    include servers/\*;
}

然后cd 到 servers目录，键入命令

vim client.conf

这样就创建了一个配置文件。

然后，键入以下配置代码

server {
    listen  80;
    server_name xxx.xxx.xx.xxx;
    # 这是一个前端 web 项目
    location ^~/client {
        alias /var/www/client/;
        try_files $uri $uri/ /client/index.html;
        index index.html;
    }
    # 这是一个后端 web 项目
    location ^~/manage {
        alias /var/www/manage/;
        try_files $uri $uri/ /manage/index.html;
        index index.html;
    }
    # 这里存放一些公用资源
    location /static{
    	alias /var/www/static/;
    }
}

最后nginx -s reload重启一下就可以了，也可以先用nignx -t确认配置是否正确。