[JavaScript知识库]nginx部署多个前端项目（基于location配置）

?基于loaction配置；同端口，同域名，不同的前端项目目录；

项目1放在/www/dist目录下；

项目2放在/www/dist2目录下；

server {
       listen 8888 default_server;   
       server_name localhost;
        location / {
            root /www/dist;
            index index.html;
        }
        location /edu {
            alias /www/dist2;
           index index.html;
        }
        location /vod {
            alias /www/dist;
            index index.html;
        }
    }    

location / 目录是root；其他的要使用alias；

访问预览结果：

???

React项目配置时参考博客： react-BrowserRouter-nginx-二级目录配置_mollerlala的博客-CSDN博客_nginx react 二级目录

1）. 要在package.json中添加homepage属性;(绝对路径)

??

添加homepage属性后，在打包生成的index.html入口文件中，引入的静态资源文件会加上ip后面的内容；这里会在引入的资源链接前添加上/edu 前缀

?2）. 在 BrowserRouter/HashRouter 元素里面加basename属性；

basename配置参考：React Router: Declarative Routing for React.js

?

?全文配置参考博客：使用nginx部署多个前端项目 - 直角漫步 - 博客园?