vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > VUE前端打包部署云服务器

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

作者：xL-gz

Vue.js是一个流行的前端JavaScript框架,用于构建现代web应用程序,这篇文章主要介绍了VUE前端项目打包部署云服务器的相关资料,文中通过图文以及代码介绍的非常详细,需要的朋友可以参考下

项目背景与部署流程

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

本地开发环境准备

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

npm run build

生成在项目根目录

上传dist到服务器

方法一：使用SCP命令上传

  1. 本地命令行切换到dist所在目录（项目根目录）
  1. 执行上传命令：
scp -r dist root@159.75.243.81:/usr/share/nginx/html/my-site
  1. 若路径不存在，先登录服务器创建目录：
ssh root@159.75.243.81
mkdir -p /usr/share/nginx/html/my-site
exit

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

宝塔面板安装

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

yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh

安装完成后会输出登录地址、用户名和密码，例如：

外网面板地址: https://159.75.243.81:29515/xxxxxx
username: admin
password: xxxxxx

安全组规则配置

登录腾讯云控制台，进入【轻量服务器】→【防火墙】，添加以下入站规则：

协议类型端口范围源地址描述
TCP800.0.0.0/0HTTP网站访问
TCP295150.0.0.0/0宝塔面板访问
TCP220.0.0.0/0SSH登录

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

宝塔面板部署网站

登录宝塔面板 浏览器访问：

https://159.75.243.81:29515/xxxxxx

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

输入用户名和密码登录

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

首次登陆

1. 修改管理员密码（重要）

2. 安装推荐环境（LNMP）

首页会提示你安装运行环境，选择安装：

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

添加站点

  1. 点击左侧菜单【网站】→【添加站点】
  2. 域名填写159.75.243.81或自定义域名------你自己云服务器的公网ip
  3. 根目录自动创建为/www/wwwroot/159.75.243.81

上传并解压dist文件

  1. 点击【文件】→【上传】
  2. 将dist.zip上传至网站根目录
  3. 右键解压文件

访问网站

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

http://159.75.243.81

多个项目创建

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

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

在网站-添加站点的时候输入你的公网IP 在加上一个不同的端口号

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

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

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

🔒 补充建议：提高安全性

操作说明
关闭宝塔默认 HTTPS在【设置】→【面板设置】中关闭 SSL 访问，除非你已绑定域名并申请证书
修改宝塔登录端口如需更安全，可在面板设置中修改为其他非知名端口（如 8888、8080）
绑定域名并启用 HTTPS后续可以用 Let's Encrypt 免费申请 SSL 证书

总结 

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

您可能感兴趣的文章:
阅读全文