1. 修改前端vue项目文件.env.production中的后台api地址为自己线上的访问地址,即修改
    VUE_APP_BASE_API参数的值;
  2. 在终端中输入命令进行打包:
    # 打包正式环境
    npm run build:prod

 打包完成后在项目根目录下会生成一个dist文件夹,将dist上传到服务器nginx的html文件夹中,

3.修改nginx配置文件nginx.conf,http模块如果没有server节点,先添加server节点,并在里边进行配置vue项目地址和后台接口地址:

 server {
        listen       80;
        server_name  172.135.236.28;
        charset utf-8;

        location / {
            root  /usr/share/nginx/html/dist;
            #try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        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://172.135.236.28:8088/;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
   }

主要修改的地方:

(1)server_name,配置后台地址或域名,

(2)location root配置上传到服务器的路径,由于我的nginx使用docker安装,docker nginx中的html在/usr/share/nginx/html下,所以root的是配置的是/usr/share/nginx/html/dist,这里要根据自己的实际情况来配置,否则会提示404,

(3)prod-api中的proxy_pass配置后台地址。

经过以上三步,重新加载下nginx就可以访问前端项目了。

这里有一处地方需要注意try_files $uri $uri/ /index.html;这一行代码会导致nginx启动报错:rewrite or internal redirection cycle while internally redirecting to "/index

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部