同一域名下部署多个vue前端项目和后端接口

一、前置知识：在服务器上部署过前端vue项目和后端接口。

二、应用场景：当我们访问一个域名时访问根路径是一个项目（例如www.bing.com），访问/shopPlatform是另一个项目（例如：www.bing.com/shopPlatform）。同时我们还可以访问/api接口获取信息（例如：www.bing.com/api/userInfo）。
三、引申问题：因为vue项目打包上传后服务器后当访问除根路径外其他页面时，一但刷新页面会显示404错误找不到页面。要解决这个问题必须在nginx.conf文件中配置try_files $uri $uri/ /index.html，而配置了这段代码，nginx中没有另加配置的接口代码则无法访问。

四、参考文章

1、部署多个vue项目https://blog.csdn.net/kielin/article/details/94459660
2、部署后端接口，解决引申问题https://www.cnblogs.com/xinxinmifan/p/9756252.html

五、nginx.conf文件配置代码

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
    worker_connections 1024;
}
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream; 
    #上面都为默认配置
    server {
        listen       80 default_server;
        server_name localhost;
        #部署第一个vue项目通过“/”进行访问
        location / {
            root /home/itemNode/client/dist; 
            try_files $uri $uri/ /index.html;#这里配置是为了解决vue项目页面刷新后无法获取页面的问题
        }
      #部署第二个vue项目通过“/storePlatform”进行访问
        location /storePlatform {
            alias /home/itemNode/client/storePlatform; 
            try_files $uri $uri/ /storePlatform/index.html;#这里配置是为了解决vue项目页面刷新后无法获取页面的问题
        }
       #部署后端接口通过“/api”进行访问
        location /api/ {
            proxy_pass http://127.0.0.1:5000/;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
}

1、配置完成后可以通过nginx -t命令来检查配置文件是否有问题。
2、第二个vue项目在打包前在vue.config.js中设置

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

3、如果没有解决问题，可以参考上面提供的参考链接。

最后编辑于：2020.09.04 09:55:36