nginx 打包配置前端项目

121 阅读1分钟

官网下载nginx,解压到英文的路径下面。

server {
        listen       80;              //监听的端口
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://www.baidu.com;   #代理的配置--练习的时候代理到了百度
            # root   html;
            # index  index.html index.htm;
        }
      }

下面是开发环境的反向代理 image.png

在nginx 中的反向代理是

location / {
            root   html;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;  #不再出现刷新404的问题
        }
        
        location /dev-api {
            proxy_pass http://ihrm.itheima.net/api;
            proxy_redirect off;
        }
     }

html文件下放的是以下的内容

image.png

如果html并没有直接放打包好的,而是放一个文件,如下

image.png 则rooy 也要进行相应的更改

location / {
            root   html/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
        

还可以再开服务器,比如我得项目中用到的地图服务,就可以像上面一样再监听一个端口