【项目部署系列教程】4. 将Vue项目部署到远程服务器

目录

​​1. 将Vue项目的部署包上传到远程服务器​​

​​方式一： 使用宝塔上传​​

​​方式二： 使用xftp上传​​

​​2. 修改 nginx 的配置​​

​​3. 重启nginx​​

​​4. 访问网站​​

1. 将Vue项目的部署包上传到远程服务器

通过 npm run build 打包vue项目后，得到 dist文件夹

方式一： 使用宝塔上传

登录宝塔，如下图，进入远程服务器的 /home文件夹后，点上传按钮，弹出上传文件弹窗

将dist文件夹拖入弹窗中，点击 开始上传 按钮 

 全部上传成功后，关闭弹窗，得到下图

方式二： 使用xftp上传

打开 xshell 连接上远程服务器后，点击 ‘新建文件传输’ 打开 xftp 窗口（也可以直接打开 xftp 软件，不过要重新新建与远程服务器的连接）

切换到 /home文件夹，复制本地的dist文件夹，在 xftp 窗口中粘贴，上传成功后效果如下：

2. 修改 nginx 的配置

登录宝塔，如下图，打开nginx配置文件

将默认的配置全部删除，替换为下方配置代码，点保存按钮保存配置。

user  root;
worker_processes auto;
error_log  /www/server/nginx/logs/error.log warn;
pid  /www/server/nginx/logs/nginx.pid;
worker_rlimit_nofile 51200;

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

http
    {
    access_log /www/server/nginx/logs/access.log;
        include       mime.types;

        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
    {
      listen 80;
      server_name localhost;

      location / {
          root /home/dist;
          index /index.html;
      }
    }
include /www/server/panel/vhost/nginx/*.conf;
}

其中的核心配置为

• 将user修改为root
• 将server 的 listen 端口号，修改为 80
• 将server 的location的root路径 修改为  /home/dist
• 将server 的location的index对应的首页文件 修改为  /index.html

3. 重启nginx

在 nginx 设置中，切换到服务中，点击重启按钮

4. 访问网站

在浏览器中，输入远程服务器的外网IP,便可以访问啦！

​​http://106.12.123.173​​