VUE前端项目打包部署云服务器详细流程(宝塔)_vue.js

前端框架采用Vue3 + TypeScript,打包输出目录为dist,部署目标为腾讯云轻量服务器(OpenCloudOS),使用宝塔面板管理网站,Nginx托管静态文件,安全组开放必要端口。

确保项目已正确打包,在本地项目根目录运行以下命令生成dist文件夹:

npm run build

生成在项目根目录

方法一:使用SCP命令上传

scp -r dist root@159.75.243.81:/usr/share/nginx/html/my-site

ssh root@159.75.243.81mkdir -p /usr/share/nginx/html/my-siteexit

本人对服务器不太了解熟悉,所以安装宝塔

服务器终端执行以下命令安装宝塔面板:

80 和 22 是默认就有的 添加29515即可,应用我选择的自定义

https://159.75.243.81:29515/xxxxxx

以上的地址密码:参考你自己运行安装宝塔输出的显示结果

根据提示注册或者绑定已有的宝塔账号

点击【一键安装】,等待安装完成

浏览器打开以下地址即可访问部署好的Vue页面:

为了区分不同的项目使用端口号区分【上面的操作默认使用的80端口】

在根目录下可创建多个文件夹作为不同项目的区分

添加好后,把你打包的文件夹解压,里面的文件放入上面创建的文件夹里面去

这样在我的project2文件夹里面放入vue打包后的产物

最后一步:在云服务器把你刚才添加的端口号的

到此这篇关于VUE前端项目打包部署云服务器的文章就介绍到这了,更多相关VUE前端打包部署云服务器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


本文地址: https://www.earthnavs.com/jishuwz/c56bb581b9aa8f48cc0b.html
全局中部横幅
国家划分

国外网站大全为您分享亚洲、北美、欧洲等六大洲,美国、日本、韩国、英国等上百个国家的各个类型的著名国外网站。

路飞学城

路飞学城立志帮助有志向的年轻人通过努力学习获得体面的工作和生活!路飞学员通过学习Python,金融分析,人工智能等互联网最前沿技术,开启职业生涯新可能。

广州本地宝

广州生活信息门户网站,提供广州交通、广州旅游、广州房地产、广州美食、广州购物、广州教育、广州医疗、广州招聘、广州团购、广州诚信商家等广州生活服务类权威实用资讯。

新抖

新抖是新榜旗下的抖音短视频&直播电商数据工具,不仅提供抖音热门视频、抖音话题挑战赛等抖音创意素材,抖音号及MCN机构排行查找,还提供打卡探店、直播带货、明星直播监测、短视频种草带货、热卖商品、品牌营销等全面的短视频在线数据服务,助力达人运营,DOU+监测,选号投放

WinRAR

WinRAR压缩软件是一款解压缩软件,电脑装机所需的软件之一,解压缩个人版免费.

CNTV

该站点未添加描述description...

天联官网

天联sd-wan是一款智能组网系统,简单方便、安全可靠、无需公网Ip,无需端口映射,解决NAT转发问题,能将不同地区的局域网组建成一个虚拟局域网,实现万事万物互连互通、异地资源共享,帮助企业提升远程办公效率。

彩虹云主机

彩虹云主机提供免备案CDN,免备案空间,全光纤网络,BGP智能多线,直连大陆ChinaNET骨干端口,资源存放在郑州、洛阳、洛杉矶、韩国、香港等多个数据中心,已实现所有主机/云服务器的SSD固态硬盘部署,硬盘读写能力提升5倍,彻底解决高并发问题,可满足高IO需求的数据库等在线业务

530礼物网

530礼物网专注好礼物推荐与选购攻略,根据不同场景与对象,精心整理了各种生日礼物,结婚礼物,情人节礼物,圣诞节礼物,毕业礼物,让您挑选到适合的、令人满意的礼物。

牛蛙资源网

牛蛙资源网,每天准时更新全网精品资源免费分享平台,专注网络活动线报,技术教程,自学教程,网站源码,技术导航,绿色资源,包括绿色软件资源,办公资源,游戏图文攻略资源等,聚集了全网资源,技术,教程,分享平台!