vue项目发布到linx上二 vue项目打包发布到nginx

1.在webstorm中打开npm窗口，选择build:prod，右键Run 'build:prod'，如下图所示

image.png

2.运行完了会在项目根目录下生成dist，如下图所示

image.png

3.将dist文件里面的东西放到linux服务器上，可以自己指定文件存放位置

image.png

4.接下来是重点，Nginx的配置，文件位置/usr/local/nginx/conf/：如下图

image.png

image.png

server {
        listen       20001;      # 监听的端口，默认是80
        server_name  localhost;  # 域名或ip

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #location / {
        #    root   html;
        #    index  index.html index.htm;
        #}
        location / {                                      # 访问路径配置
          root  /home/cbi-linux/webserv/cbi-data-front;   # 根目录
          try_files $uri $uri/ /index.html;               # 防止刷新404 
          index  index.html;                              # 默认首页
        }
        
        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://117.34.72.199:30093/;  # 后端服务器地址，很重要，nginx会将前端的请求通过该地址发送给后端，获取数据
            }
        #error_page  404              /404.html;
       
        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

5.重新加载nginx配置文件，重启nginx

/usr/local/nginx/sbin/nginx -s reload            # 重新载入配置文件
/usr/local/nginx/sbin/nginx -s reopen            # 重启 Nginx
/usr/local/nginx/sbin/nginx -s stop              # 停止 Nginx

通过前端端口做的映射117.34.72.199:40093 访问，172.16.254.93:20001真实服务ip地址

image.png

6.成功访问如下图

image.png