本篇文章接上回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模板网!