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
