若依发布到Nginx

wyzyysw

已于 2023-05-05 17:27:21 修改

阅读量2k

点赞数

分类专栏：前端文章标签： nginx 前端 vue.js

于 2023-03-20 11:41:06 首次发布

本文链接：https://blog.csdn.net/wyzyysw/article/details/129663406

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何配置前端Vue项目，包括修改环境变量，调整路由设置，以及使用npm进行生产环境打包。接着，文章讲解了Nginx的配置，如创建HTML目录，放置前端打包文件，编辑Nginx配置文件以代理后端请求，最后通过nginx-sreload命令重启服务使配置生效。

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

一、前端配置

1、找到环境配置文件，如下图：
在这里插入图片描述
2、把VUE_APP_BASE_API改成你前端文件名（这个文件名后面再配置Nginx的时候会用到）
3、在router目录下找到index.js
拉到最下面，改成下面的配置（base的值改成后端访问地址前缀）

vue.config.js保持默认就行
4、运行npm run build:prod进行打包
5、打包成功的文件会放在dist目录下
在这里插入图片描述

二、Nginx配置

1、进入Nginx下html页面

mkdir ui
cd ui

在html目录下我们新建一个ui目录，然后把前端打包好的dist目录下面的文件放进去
可以再pwd一下，然后把路径复制，待会儿会用到

rz -be #上传
unzip dist.zip #解压打包好dist的文件夹

2、进入到Nginx，conf目录下vim nginx.conf编辑Nginx配置文件
配置代码

server {
        listen       nginx端口;
		server_name  nginx地址;
        error_log logs/server-error.log debug;

        location / {
            root  xxx/html/ui;  #前端页面在Nginx下html存放的位置，上面步骤pwd复制的路径
   	        try_files $uri $uri/ /index.html;     #解决登录之后刷新404
            index  index.html index.htm;
        }
        
        location /前端打包文件名/{
	        proxy_connect_timeout  600;
			proxy_send_timeout     600;
			proxy_read_timeout     600;
            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 后端地址; 
            #注意前端打包文件名和后端打包之后的文件名不能一样
         }
		 
        error_page  404               /404.html;
		
        error_page   500 502 503 504  /50x.html;
        location =   /50x.html {
            root   html;
        }

    }