本篇文章接上回Docker中的Nginx配置代理实现不同url访问vue和springboot项目-CSDN博客
在上篇已经实现可以访问http://ip/qianduan 到我们的vue项目，但是有个问题就是如果多个vue项目在/assets/ 的静态资源文件夹就无法设置，我试过在nginx里面使用if，try_files，map等使其根据不同请求的地址来让location中的assets 代理值发生改变，但是都以失败告终。
这里再说明一下，本教程和上一个教程，无论是nginx，vue1项目，vue2项目，springboot都是用docker配置的容器。
现在找到一个办法：
1.在自己的vue项目里面的vite.config.js文件里面添加base路径（为了在/assets/前面多加一个访问文件夹）
base: '/whyz/', // 设置基础路径为 /whyz/
2.将修改后的vue部署到docker里面，端口什么的都不用变，和之前的保持一致（部署上去用ip加端口访问页面什么都没有，控制台发现报了资源404，不用管）
3.进入Nginx代理服务器的配置文件里面
cd /root/nginx #这个是上篇文章建立的
4.在Nginx代理服务器配置文件做如下：（nginx.conf这里给到全部配置）
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
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;
default_type application/octet-stream;
include /etc/nginx/conf.d/*.conf;
server {
listen 80 default_server;
listen [::]:80 default_server;
#server_name 124.71.10.190;
##########################################通用测试项目vue
location /common/ {
proxy_pass http://124.71.10.190:1237/;
}
##########################################whyz的vue
location /whyz/ {
proxy_pass http://124.71.10.190:7468/;
}
##########################################
error_page 404 /404.html;
location = /40x.html {}
error_page 500 502 503 504 /50x.html;
location = /50x.html {}
}
}
以上标红位置就是需要修改为自己的vue1和vue2的地址（注意：/whyz/ 这个是对应在vite.confg.js里面设置的base路径）
5.将修改后的配置文件移进代理Nginx中
docker cp nginx.conf nginx:/etc/nginx/nginx.conf
nginx是用docker配置的容器，换成自己的
6.重启nginx容器
docker restart nginx
7.访问：
http://124.71.10.190/whyz/
http://124.71.10.190/common/文章来源：https://www.toymoban.com/news/detail-840561.html
注意：在本篇中我们在vite.conf中设置了base地址，本地直接跑是没问题的，但是上传在docker里面直接ip+端口是无法访问的，这个没去解决，但是这样的话我们通过nginx的代理去访问，就可以实现我们的多个vue项目运行解决静态资源的问题。因为现在直接ip+端口跑不起来，所以自己取舍一下要么不要base直接注释掉，通过ip+端口访问，要么就加个base通过nginx的代理文章来源地址https://www.toymoban.com/news/detail-840561.html
到了这里，关于Docker中的Nginx配置代理实现不同url访问多个vue项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
