通过宝塔面板部署前后端分离Vue项目

最新推荐文章于 2024-08-03 14:32:15 发布
最新推荐文章于 2024-08-03 14:32:15 发布
阅读量7.8k 收藏 13
点赞数 1
分类专栏： vue 文章标签： vue.js node.js 后端 webstorm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iiLeon/article/details/123744098
版权
本文介绍了如何通过宝塔面板在云服务器上部署前后端分离的Vue项目。首先，需要在宝塔面板中安装PM2和选择合适的Node.js版本，并放行端口。接着，导入后端和前端项目文件，前端的dist包由npm run build生成。然后，导入SQL数据库文件，并在终端中启动后端项目。如果遇到端口占用等问题，可以使用命令清理。至此，部署过程完成。
摘要由CSDN通过智能技术生成

宝塔面板部署前后端分离Vue项目

一、首先进入宝塔页面

在云服务器控制台，远程连接实例，在shell命令行中输入
/etc/init.d/bt default

获取宝塔面板网站，输入账号密码，进入宝塔控制台。

在软件商店中下载PM2管理器，安装好之后再设置中选择合适的Node.js版本。
在宝塔面板 --> 安全 -->放行端口，放行前端和后端的端口号

二、文件导入

通过宝塔面板的文件栏，找到 /www/wwwroot 目录下，将后端项目压缩包，解压到该目录下。再进入到 /www/wwwroot/http 目录下，将前端项目的dist包，解压到该目录下，即可。
tips：dist包可以通过前端项目 npm run build 自动打包生成
SQL数据库文件导入
最低0.47元/天 解锁文章
iiLeon
关注
专栏目录
手把手教学使用宝塔面板部署前后端分离项目（全面详细）
黄团团的个人博客
07-01 5463
平日里我们的前后端项目基本上都是通过linux系统提供的命令窗口去部署，有没有一种更简单可视化的方式去部署我们自己的项目呢，答案是有的，本篇博客就是手把手教学如何通过一个可视化的页面去部署我们自己开发的前后端分离项目。
宝塔部署前后端分离项目手册
cgblpx的博客
05-27 1843
JDK怎么更好地安装呢？在部署的过程中，难免磕磕绊绊，比如在正式运行后端项目时我们需要先在Linux系统中安装JDK，并且在部署的时候还需要注意跨域问题(Controller层加@CrossOrigin)。当我们运行完上面的命令，刷新当前目录，就可以看到多出来的nohup.out文件，双击该文件可以查看spring的运行状态。在正式将文件上传到服务器之前，我们先在本地启动一下前端项目，查看一下前端项目在本地启动时所占用的端口，在这里，我的端口号是9528 ，注意这个细节，后面在上传前端文件之后需要用到。
宝塔面板部署vue项目
m0_67391518的博客
03-06 843
最近闲着无聊，自己买了一个阿里云的服务器玩耍。突发奇想部署一个vue的项目。主要用了宝塔面板进行部署。 1.宝塔面板显示自己的服务器配置（自己百度，这里省略）；主要讲vue的项目的部署情况 在宝塔面板添加自己的站点，（同一个id可以部署不同的站点，本篇文章不做介绍，后续文章有介绍）； 2.vue项目打包 打开你的项目目录，用终端进行打包（npm run build） dist目录： 3.打包完之后会出现dist的目录，然后将dist放在你的目标站点中。 上传dist目录： 查看目标站点的根目录是不是
使用 宝塔面板 部署 springboot 和 vue
最新发布
weixin_45940369的博客
08-03 1916
仿照别人项目做了个基于 springboot 和 vue 的网站，在腾讯云服务器上，通过 宝塔面板 部署了该项目。项目的技术栈：Vue3、Vite5、Axios、Element Plus、Wangeditor5、Highlightjs、Spring Boot2、Mybatis、MySQL8。
宝塔部署vue项目
Allen的博客
12-10 1477
宝塔部署vue项目教程
宝塔部署前后端分离项目（前后端接口）
You_xx的博客
09-13 2593
宝塔面板部署前后端分离项目，实现前后端反向代理功能
宝塔面板部署前后端分离项目（一）
l13501058595的博客
10-04 2749
宝塔面板搭建网站（一） 作为学生，当我们把写好的页面或者项目写好后想要让别人看到效果，第一个想到的就是网站部署。但是许多人认为搭建网站是一件很难的事情。这时有个很好的东西就方便了我们这些服务器小白，简单快速部署项目，让你急迫分享成果的心有个着落。 准备工作 服务器：最好为1G内存以上（此处我用的阿里云服务器Centos7系统） 域名：注册域名 宝塔面板 SSH工具：推荐使用XShell FTP工具：推荐使用XFTP 1.安装配置宝塔 刚买的服务器，系统一定是最纯净的，如果之前玩过服务器又不知道下载了什么
Linux下宝塔部署 SpringBoot + Vue 前后端分离项目
weixin_53835008的博客
07-25 1074
配置入口类根据自己项目指定，即启动类全路径在启动类 右键 Copy Path.. ->Copy Reference 复制idea插件打包，在IDEA右侧Maven Projects栏双击package等待Build Success即可，打包前双击clean清理旧缓存和配置的影响。打包完成后jar包会生成到项目里的target目录下，命名一般是 项目名+版本号.jar可以在本地命令先运行一下jar包，看有无问题。
SpringBoot+Vue前后端分离跨域项目的宝塔面板部署上线(全网最详细)
m0_67402013的博客
06-12 942
基于 Spring Boot + Vue 的前后端分离项目的部署方式主要有如下两种： 前后端一起部署：将 Vue 项目打包后的dist文件放到 Spring Boot 项目的资源目录下，然后在服务器上部署 Spring Boot 项目即可，终究还是后端项目。 前后端单独部署：将 Spring Boot 项目打包后部署到服务器，再将 Vue 项目打包部署至服务器，最后配置 Nginx 解决请求跨域时的端口转发问题。 第一种方式较容易，也无需进行服务器跨域的相关配置，都使用的是Tomcat服务器进行部署。适合小
宝塔部署-vue项目
romance189的博客
07-30 357
下载node后，选择项目目录，并且选择启动项和npm包管理器，其他具体配置看实际情况。首先在vite.config.js中设置端口。创建vite项目，配置好环境和前端页面。直接上传项目的所有文件即可。
利用宝塔面板部署Vue项目教程
热门推荐
WEXIA666的博客
06-26 2万+
1 安装 堡塔SSH客户端，进行SSH连接服务器 2 在Ubuntu的系统中，输入命令 wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh 3 安装成功之后，输入服务器ip+8888端口访问宝塔面板 http://1xx.xxx.xx:12580/ //这里我已经将宝塔面板默认的端口改为了 12580 4 SSH连接之后，输入 bt 就可以列出
Linux宝塔面板部署Vue和Spring项目
记录了个人在学习生活中的所思所想，在反思自己的同时希望也能够帮到你
10-26 2282
当一个前后端分离的项目写好之后，我们应该如何将其部署到服务器中呢？下面我们将在一个服务器中部署前端的vue项目，和后端的springboot项目，看看一个完整的前后端项目究竟是如何部署起来的吧！（声明：其中的前端vue代码来自B站黑马程序员的资料，后端的springboot代码是本人所写~） 在正式部署之前，我们应该将前提条件准备好， 必要的有FTP、MySQL、PHP、phpMyAdmin、java项目一键部署，其中，PHP用来启动前端项目，phpMyAdmin用来开启一个新的网页管理MySQL数据库。
使用宝塔部署Vue项目
weixin_56868125的博客
02-08 5672
使用宝塔部署Vue项目
nginx部署前后端分离vue项目
07-08
要在Nginx上部署前后端分离的Vue项目，可以按照以下步骤进行操作： 1. 构建Vue项目：在本地开发环境中使用Vue CLI或其他构建工具，构建Vue项目。确保构建完成后生成了静态资源文件。 2. 配置Nginx：在Nginx的配置文件中进行如下配置： ```nginx server { listen 80; server_name your_domain.com; # 配置前端静态资源路径 location / { root /path/to/your/vue-project/dist; try_files $uri $uri/ /index.html; } # 配置后端接口转发 location /api { proxy_pass http://backend_server:port; # 其他代理相关配置 } } ``` 在上述配置中，将`your_domain.com`替换为你的域名或IP地址。`/path/to/your/vue-project/dist`是你构建的Vue项目的静态资源路径。`http://backend_server:port`是后端接口的地址。 3. 启动Nginx：保存配置文件后，启动Nginx服务。 ```bash sudo service nginx start ``` 或 ```bash sudo systemctl start nginx ``` 4. 验证部署：通过浏览器访问你的域名或IP地址，应该能够看到Vue项目的页面。同时，前端页面中的API请求会被Nginx转发到后端接口服务。 注意：在部署时，确保你的服务器上已经安装了Nginx，并且后端接口服务已经启动并且可以通过配置的地址访问到。同时，根据你的实际情况，可能需要进行一些额外的配置调整，比如HTTPS支持、反向代理等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值