nginx 关于一个域名配置多个vue web端项目

最新推荐文章于 2024-04-02 16:50:11 发布

weixin_42548560

最新推荐文章于 2024-04-02 16:50:11 发布

阅读量837

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_42548560/article/details/125848167

版权

本文介绍了如何配置两个Vue项目的静态资源访问前缀，修改路由，并详细展示了Nginx的配置，包括基本配置、针对不同项目的location设置以及解决页面刷新404问题的方法。同时，还涉及到了API的反向代理配置。

摘要由CSDN通过智能技术生成

第一个项目正常配置即可；访问地址：www.xxyyzz.com

第二个项目访问地址：www.xxyyzz.com/hdweb

1、修改静态资源访问前缀

2、修改路由 router/index.js

3、打包完成后上传

nginx配置

        location / {
           root D:/nginx-1.16.1-xtces/html/xtweb;
           index index.html index.htm;
       }
       #第二个vue项目
location /hdweb {
   alias D:/nginx-1.16.1-xtces/html/hdweb/;#注意这里
   index index.html index.htm;
try_files $uri $uri/ /hdweb/index.html; #解决页面刷新404问题
}
       location /prod-api/{
           proxy_set_header Host $http_host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header REMOTE-HOST $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           #proxy_pass http://10.128.8.90:8095/;
           proxy_pass http://localhost:8095/;
       }

       location /prod-hdapi/{
           proxy_set_header Host $http_host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header REMOTE-HOST $remote_addr;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_pass http://localhost:8095/;
       }