vue+springboot项目部署到服务器

一、安装nginx

sudo yum install epel-release -y

sudo yum install nginx -y

启动并设置开机自启：

sudo systemctl start nginx

sudo systemctl enable nginx

二、vue 打包与上传

到vue项目的genb根目录下打包项目：

npm run build

打包完成后会出现dist 文件夹。

用终端连接我们租的云服务器，将dist上传到服务器，

将dist文件夹移动到/usr/share/nginx/html/ 下

三、配置 Nginx

配置文件路径一般是：

/etc/nginx/nginx.conf

修改文件

vi /etc/nginx/nginx.conf

复制代码

  server {

        listen       80;

        listen       [::]:80;

        server_name  你云服务器的公网IP;

        root         /usr/share/nginx/html/dist;



        # Load configuration files for the default server block.

        include /etc/nginx/default.d/*.conf;



        error_page 404 /404.html;

        location = /404.html {

        }



        error_page 500 502 503 504 /50x.html;

        location = /50x.html {

        }

}

但是，一般来说我们在开发环境下会进行跨域处理，url会加上一个/api 然后用vue的vue.config.js文件中处理，但是nginx不会发现处理vue.config.js文件，这里就需要用到他的反向代理：

复制代码

server {

    listen       80;

    listen       [::]:80;

    server_name  你的云服务器的ip;





    root   /usr/share/nginx/html/dist;

    index  index.html;





    location / {

        try_files $uri $uri/ /index.html;

    }



    location ^~ /api/ {

      rewrite ^/api/(.*)$ /$1 break;

      proxy_pass https://127.0.0.1:9000;

      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;

    }





    error_page 404 /404.html;

    location = /404.html {

    }



    error_page 500 502 503 504 /50x.html;

    location = /50x.html {

    }

}