关于前端部署研究了挺久的,一开始毫无头绪也走了很多弯路,看了许多视频和文档之后,才慢慢有了了解,成功访问之后特别开心,希望记录下来对可能遇到同样问题的各位有一丢丢小帮助哈~

请添加图片描述

1.打包本地vue项目

  1. 运行npm run build
    在这里插入图片描述
  2. 生成dist目录文件(之后就是将该文件放到云服务器上)在这里插入图片描述

2.购买云服务器

  • 你可以选择在腾讯云上租一个云服务器,然后选择centos云服务器,租用成功后,需要配置一下你的云服务器,包括密码、开放端口管理等,后面都会用到的。当简单配置完毕后,你需要安装一下nginx,网上教程很多,这里就不详细描述了。

3.使用xshell

  1. 下载安装包可以参考这篇博客xshell安装包
  2. 通过xshell连接云服务器在这里插入图片描述
  3. 输入用户名,一般默认root在这里插入图片描述
  4. 输入密码,服务器密码在这里插入图片描述
  5. 这样即连接成功在这里插入图片描述

4.在xshell里安装宝塔

  1. yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh在这里插入图片描述
    在这里插入图片描述
  2. 显示用户名、密码即表示安装成功在这里插入图片描述
  3. 登录宝塔,访问外网面板地址在这里插入图片描述
  4. 进入宝塔在这里插入图片描述

5.宝塔操作

  1. 修改配置文件nginx.conf在这里插入图片描述
 server {
        listen 8088;
        server_name www.qhzd.ltd;
        location / {
			root /usr/local/nginx/html/dist;
			index index.html index.htm;
		}
		error_page   500 502 503 504  /50x.html;
        location /devApi/ {
            # root /usr/local/nginx/html/dist;
            rewrite ^.+devApi/?(.*)$ /$1 break;
            proxy_pass http://公网ip:8090/;
        }
    }

在这里插入图片描述

  1. 上传压缩文件在这里插入图片描述
  2. 开放8088端口号在这里插入图片描述

6.成功访问

在这里插入图片描述
在这里插入图片描述

加油哦!!!
请添加图片描述

Logo

前往低代码交流专区

更多推荐