vue项目打包部署到腾讯云全过程

文章目录

    • 1.打包本地vue项目
    • 2.购买云服务器
    • 3.使用xshell
    • 4.在xshell里安装宝塔
    • 5.宝塔操作
    • 6.成功访问

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

请添加图片描述

1.打包本地vue项目

  1. 运行npm run build
    vue项目打包部署到腾讯云全过程_第1张图片
  2. 生成dist目录文件(之后就是将该文件放到云服务器上)vue项目打包部署到腾讯云全过程_第2张图片

2.购买云服务器

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

3.使用xshell

  1. 下载安装包可以参考这篇博客xshell安装包
  2. 通过xshell连接云服务器vue项目打包部署到腾讯云全过程_第3张图片
  3. 输入用户名,一般默认rootvue项目打包部署到腾讯云全过程_第4张图片
  4. 输入密码,服务器密码vue项目打包部署到腾讯云全过程_第5张图片
  5. 这样即连接成功vue项目打包部署到腾讯云全过程_第6张图片

4.在xshell里安装宝塔

  1. yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.shvue项目打包部署到腾讯云全过程_第7张图片
    vue项目打包部署到腾讯云全过程_第8张图片
  2. 显示用户名、密码即表示安装成功vue项目打包部署到腾讯云全过程_第9张图片
  3. 登录宝塔,访问外网面板地址vue项目打包部署到腾讯云全过程_第10张图片
  4. 进入宝塔vue项目打包部署到腾讯云全过程_第11张图片

5.宝塔操作

  1. 修改配置文件nginx.confvue项目打包部署到腾讯云全过程_第12张图片
 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/;
        }
    }

vue项目打包部署到腾讯云全过程_第13张图片

  1. 上传压缩文件vue项目打包部署到腾讯云全过程_第14张图片
  2. 开放8088端口号vue项目打包部署到腾讯云全过程_第15张图片

6.成功访问

vue项目打包部署到腾讯云全过程_第16张图片
vue项目打包部署到腾讯云全过程_第17张图片

加油哦!!!
vue项目打包部署到腾讯云全过程_第18张图片

你可能感兴趣的:(项目技术点,腾讯云,vue.js,前端)