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























