【Vue】宝塔面板服务器配置Vue项目

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

[1] 编译Vue项目成dist文件夹

输入打包Vue项目语句：

npm run build:prod

打包完成后，shell提示如下：

【Vue】宝塔面板服务器配置Vue项目_html

然后在项目中，会出现一个dist文件夹：

【Vue】宝塔面板服务器配置Vue项目_服务器_02

[2] 把dist文件夹上传到服务器

我的路径如下：

【Vue】宝塔面板服务器配置Vue项目_前端_03

[3] 增加配置服务器的nginx

配置代码如下：

server {
        listen       80;
        server_name  localhost;

        location / {
            root   /www/wwwroot/blueele/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://localhost:8080/;
        }       
        location /dev-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://localhost:8080/;
        }

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