前端项目vue-admin-template 部署

上个文章记录了怎使用vue-admin-template进行二次开发，今天记录下项目开发完了怎样部署在自己的服务器上：

新手，我推荐安装宝塔界面，方便

今天我们就使用xshell和xftp，首先连接上自己的服务器

第一步：下载nginx

然后再nginx官网下载linux版本的nginx，然后上传到服务器上，可以使用xftp拖上去，然后放在随便一个文件夹，或者自己新建一个文件夹，然后解压这就要使用命令来解压了

第二步：上传和解压

解压命令：

　　命令格式：tar -zxvf 压缩文件名.tar.gz

然后删除压缩文件：

        命令格式：rm -rf 压缩文件名

宝塔不需要命令，点点按钮就可以

然后启动nginx查看是否成功，进入nginx/sbin然后双击nginx或者使用命令

第三步：启动

启动命令 start nginx 

然后打开浏览器，输入你的服务器 ip，看到 welcome to  nginx,就证明已经ok一半了

然后回到项目，打包项目

第四步：打包项目

命令： npm run build:prod 

打包完后会出现dist文件夹，把这个文件夹上传到服务器，位置随便，可以新建文件

然后最重要的就是ngnx配置文件，进入安装的nginx的文件夹，找到conf下面的nginx.conf，打开

我把我的配置贴再这里，做了跨域的，我把要修改的地方写了备注

#这句可写可不写
user  root;
worker_processes auto;
error_log  /www/wwwlogs/nginx_error.log  crit;
pid        /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

stream {
    log_format tcp_format '$time_local|$remote_addr|$protocol|$status|$bytes_sent|$bytes_received|$session_time|$upstream_addr|$upstream_bytes_sent|$upstream_bytes_received|$upstream_connect_time';
  
    access_log /www/wwwlogs/tcp-access.log tcp_format;
    error_log /www/wwwlogs/tcp-error.log;
    include /www/server/panel/vhost/nginx/tcp/*.conf;
}

events
    {
        use epoll;
        worker_connections 51200;
        multi_accept on;
    }

http
    {
        include       mime.types;
		#include luawaf.conf;

		include proxy.conf;

        default_type  application/octet-stream;

        server_names_hash_bucket_size 512;
        client_header_buffer_size 32k;
        large_client_header_buffers 4 32k;
        client_max_body_size 50m;

        sendfile   on;
        tcp_nopush on;

        keepalive_timeout 60;

        tcp_nodelay on;

        fastcgi_connect_timeout 300;
        fastcgi_send_timeout 300;
        fastcgi_read_timeout 300;
        fastcgi_buffer_size 64k;
        fastcgi_buffers 4 64k;
        fastcgi_busy_buffers_size 128k;
        fastcgi_temp_file_write_size 256k;
		fastcgi_intercept_errors on;

        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.1;
        gzip_comp_level 2;
        gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
        gzip_vary on;
        gzip_proxied   expired no-cache no-store private auth;
        gzip_disable   "MSIE [1-6]\.";

        limit_conn_zone $binary_remote_addr zone=perip:10m;
		limit_conn_zone $server_name zone=perserver:10m;

        server_tokens off;
        access_log off;

server
    {    
        #端口默认80，可以不修改
        listen 80;
        server_name localhost;
        index index.html index.htm index.php;
        #这里要修改，改为你打包后上传的文件夹的位置
        root  /root/workspace/dist;
        #下面这两句也要加上，防止路由刷新页面空白问题
        try_files $uri $uri/ @router;
        # error_page 405 =200 http://$host$request_uri;

        #error_page   404   /404.html;
        include enable-php.conf;

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
            expires      12h;
        }

        location ~ /\.
        {
            deny all;
        }
        #这里是要做的就是反向代理和跨域，/prod-api/和项目里面的.env.production文件里面保持一致
        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;
            #上面是跨域，这句是反向代理http后面是你项目的后端地址
			proxy_pass http://118.31.228.113:5730/;
		}
        
         #重点配置，这里也是必须
          location @router {
              rewrite ^.*$ /index.html last;
          }
          error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }


        access_log  /www/wwwlogs/access.log;
    }
include /www/server/panel/vhost/nginx/*.conf;
}

第五步：重启nginx

重启命令：nginx -s reload

然后刷新刚才的页面页面就会出现，后端接口访问也是正常的