用腾讯云服务器部署VUE项目

本文记录了使用腾讯云服务器部署Vue项目的全过程,包括远程桌面连接、腾讯云设置、防火墙配置以及解决访问问题的细节。在腾讯云服务器上设置安全组规则,确保外网可以访问项目,并打开服务器防火墙对应端口,以实现从任何电脑都能访问项目的目标。遇到问题时,可通过重启服务和检查Vue项目端口设置来排查。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

虽然还未开始研究生生涯,但是导师已经给了任务。出差回来,要求把项目部署到服务器上,这样各个课题之间可以看见。我以前只是听说过服务器,并不知道拿来看什么,还问了一句不用服务器可不可以,负责人告诉我,如果你的电脑可以24小时开机,那就可以不用服务器。这次部署服务器踩了许多坑,打算记录下来。

1.远程桌面连接

我使用的是腾讯云服务器,购买后,会得到公网IP,用户名,密码。Ctrl+R ,输入mstsc。进入远程桌面连接。然后依次输入上面的信息

真的可以吗
在这里插入图片描述
这个就是服务器,其实就是一台电脑。

2.腾讯云设置

在这里插入图片描述
登录进入,选上面的云产品,云服务器。

在这里插入图片描述
选择安全组,点击修改规则。

### 如何在腾讯云服务器上搭建和部署 Vue.js 项目 #### 准备工作 为了成功部署 Vue.js 项目腾讯云服务器,需先完成一些准备工作。确保已拥有一个可访问的腾讯云服务器实例,并安装好必要的软件环境,如 Nginx 或其他 Web 服务器用于提供静态资源服务。 #### 文件上传与解压 将本地开发好的 Vue.js 项目的构建版本(通常是 `dist` 文件夹下的内容)压缩成 zip 或 tar.gz 格式的存档文件。接着利用 FTP/SFTP 工具或是宝塔面板的功能把该压缩包传输到指定位置 `/www/wwwroot/project` 下并执行解压操作[^1]。 #### 安装依赖项和服务启动脚本设置 如果采用 Node.js 构建工具链来编译生产环境所需的静态资产,则还需要同步传送 node_modules 目录或是在目标机器上重新运行 npm install 命令以获取所有必需的 JavaScript 库支持。对于仅作为前端展示用途的应用来说这一步骤可能不是强制性的。 #### 配置Nginx实现反向代理 编辑 nginx.conf 或者创建一个新的 server block 来定义站点根路径指向之前提到过的 project 文件夹内的 dist 子目录。移除 vue.config.js 中有关 devServer 的配置部分因为这部分主要用于开发阶段而不是线上发布时使用[^2]。 ```nginx server { listen 80; server_name your_domain.com; location / { root /www/wwwroot/project/dist; try_files $uri $uri/ /index.html; } } ``` #### 数据库连接 (针对有后端接口的情况) 如果有涉及到数据库交互的需求,比如通过 API 请求从 MySQL 获取数据的话,那么就需要按照实际情况调整应用内部的数据源链接字符串以及相应驱动程序的加载逻辑。可以通过 Docker 创建带有特定参数设定的 MySQL 实例来进行管理[^3]。 #### 测试验证 最后重启 Nginx 让新的配置生效,打开浏览器输入域名地址查看页面能否正常显示从而确认整个部署流程是否顺利完成。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值