vue/react前端项目生成的dist文件使用nginx部署流程

1.安装nginx（本人是mac电脑）

打开命令行执行安装命令： brew install nginx

然后在执行nginx -v 确认是否安装成功

可以看到现在已经安装好了

打开http://localhost:8080 就可以看到默认的nginx页面

2.打开Finder,使用快捷键Command+Shift+G 弹出搜索框 输入/usr/local/Cellar/nginx/1.25.4

点击进入html这个文件

把vue/react打包好的dist文件放在html这个文件里面去 3.再次打开Finder,使用快捷键Command+Shift+G 弹出搜索框

• 输入usr/local/etc/nginx

• 点击进入nginx这个文件， 可查看到nginx.conf这个文件

用文本编辑的方式打开编辑nginx.conf这个文件

新增一个serve

server {
        listen       8090;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /usr/local/var/www/dist(dist文件路径);
            index  index.html index.htm;
        }

        #error_page  404              /404.html;
         # 配置后端接口
        location /api { # api前端统一代理的前缀
        # 代理的后端服务，如果没有上下文（schedule）的话,则直接配置到端口即可
	        proxy_pass 后端接口url; 
	        proxy_set_header Host $host;
	        proxy_set_header X-Real-IP $remote_addr;
	        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	        proxy_set_header X-Forwarded-Proto $scheme;
	        proxy_redirect off;
        }

编辑完成后保存

4.打开命令行执行 nginx -s reload （重启nginx）

5.打开http://localhost:8090 就可以看到你的项目了

有疑问可留言回复，不足的地方也希望大家可以指正