当前位置： 首页 > news >正文

Vue前端项目部署到宝塔面板的详细过程

news 来源：原创 2025/8/15 13:22:01

目录

前言

一、项目的打包与上传

1、修改前端项目

2、关于test环境的补充修改

3、打包前端项目

二、添加站点，启动项目

三、总结

前言

书接上回

SpringBoot项目部署到宝塔面板的详细过程-CSDN博客

本次以SmartAdmin的项目为例，通过宝塔面板部署，对部署过程进行一个完整演示，不同项目的部署也可能略有不同。过程仅为参考。

准备工具：可正常登录宝塔面板、Vue项目（本文以SmartAdmin的开源项目为例）、WebStorm 2024.2.2（或其他编译器）

Vue项目的部署与前端项目部署类似，不过省去了数据库的一步，主要有两个步骤，一是项目的打包与上传，打包之前需要进行必要的修改，如修改连接的后端的地址，修改baseUrl等等；二是在服务器启动项目

一、项目的打包与上传

1、修改前端项目

这里主要修改前端链接后端的地址，对于.env.test文件，只有url需要修改，这里修改为后端地址，这个地址是刚才后端项目设置的域名。

如果你的项目不适用.env文件，可以找一找项目中配置的前端链接后端地址的位置，修改一下即可。

2、关于test环境的补充修改

这里主要检查baseUrl，我们期望的baseUrl为“/”。

检查根目录下的vite.config.js，确保base的值为“/”，项目默认给base赋值的三元运算符的值恒为“/”。

检查package.js文件，发现build：test脚本执行时，重新设置了base的值，启动脚本时添加的指令会覆盖掉vite里面的配置，这可能导致前端项目部署后错误访问到了/admin，这里为了方便这里把base的设置移除，即删除“—base=/admin”，使用vite中的配置即可。

上述为此项目test环境特有，大家可以按需修改。

3、打包前端项目

SmartAdmin官方给了以下指令进行项目打包，在黑框执行如下代码之一

npm run build:prod

npm run build:test

npm run build:pre

分别对应三种不同的环境，这里选择执行

npm run build:test

打包完成之后，根目录下会生成一个dist文件夹。

打开宝塔面板将此文件夹上传，这里上传的目录是/home/smart_admin_v3/dist。

如果你的项目没有那么复杂，package.js没有设置那么多脚本的话，可以修改完后端连接地址之后，执行

npm run build

即可

二、添加站点，启动项目

点击网站->php项目->添加站点。

将目录设置为刚才上传的目录，并设置域名。注意，域名需要在腾讯云解析之后，才可以正常访问！

三、总结

前端部署需要在后端部署完成之后，因为需要后端地址。主要流程是修改连接后端服务器的地址，打包上传项目，启动站点。

相关文章：

Vue前端项目部署到宝塔面板的详细过程

目录 前言 一、项目的打包与上传 1、修改前端项目 2、关于test环境的补充修改 3、打包前端项目 二、添加站点，启动项目 三、总结 前言 书接上回 SpringBoot项目部署到宝塔面板的详细过程-CSDN博客 本次以SmartAdmin的项目为例，通过宝塔面板部署…...

编程日记 2025/8/15 13:22:01

免费高质量贴图（Textures） 网站推荐

以下是一些提供 免费或高质量贴图（Textures） 的网站，包括 PBR 贴图、HDRI 贴图、材质等，适用于 Three.js、Blender、Unity、Unreal Engine 等软件。 🌍 1. Poly Haven（https://polyhaven.com/）⭐…...

编程日记 2025/8/14 8:50:03

C++进阶——map和set的使用

目录 1、序列式容器和关联式容器 2、set系列的使用 2.1 set和multiset的参考文档 2.2 set类的介绍 2.3 set的构造和迭代器 2.4 set的增删查 2.5 set的insert和迭代器遍历 2.6 set的find和erase 2.7 set的lower_bound和upper_bound 2.8 multiset和set的差异 2.9 349.…...

编程日记 2025/8/13 9:14:39

AI机器学习---Anaconda

Anaconda指的是一个开源的Python发行版本，其包含了Conda、Python等180多个科学包及其依赖项。因为包含了大量的科学包，Anaconda 的下载文件比较大（约 531 MB），如果只需要某些包，或者需要节省带宽或存储空间…...

编程日记 2025/8/14 7:17:11

如何在Futter开发中做性能优化？

目录 1. 避免不必要的Widget重建 问题：频繁调用setState()导致整个Widget树重建。 优化策略： 2. 高效处理长列表 问题：ListView一次性加载所有子项导致内存暴涨。 优化策略： 3. 图片加载优化 问题：加载高分辨率…...

编程日记 2025/8/13 17:28:34

leetcode 75.颜色分类（荷兰国旗问题）

题目描述 题目分析 本题是经典的「荷兰国旗问题」，由计算机科学家 Edsger W. Dijkstra 首先提出。 要想单独解决这道题本身还是很简单的，统计0、1、2的数量然后按顺序赋值，或者手写一个冒泡排序，whatever。 但是在这一题中我们主…...

编程日记 2025/8/11 14:46:21

JVM--垃圾回收

垃圾回收的概念 垃圾回收主要针对的是堆中的对象，堆是一个共享的区域，创建的对象和数组都放在这个位置。但是我们不能一直的创建对象，也不是所有的对象能一直存放，如果不进行垃圾回收，内存迟早会耗尽，及时…...

编程日记 2025/8/15 4:47:36

Spring boot3-Http Interface： 声明式编程

来吧 1.首先引入pom.xml依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId> </dependency> 2.创建WebClientController控制器 import com.atguigu.boot3_07_http.serv…...

编程日记 2025/8/12 11:56:21

springboot EasyExcel 实现导入导出

1. 添加依赖 确保 Maven 依赖中包含 EasyExcel 3.0.5&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.5</version></dependency><!-- excel工具 --><dep…...

编程日记 2025/8/12 19:19:09

基于RAGFlow本地部署DeepSpeek-R1大模型与知识库：从配置到应用的全流程解析

作者&#xff1a;后端小肥肠 &#x1f34a; 有疑问可私信或评论区联系我。 &#x1f951; 创作不易未经允许严禁转载。 姊妹篇&#xff1a; DeepSpeek服务器繁忙&#xff1f;这几种替代方案帮你流畅使用&#xff01;&#xff08;附本地部署教程&#xff09;-CSDN博客 10分钟上手…...

编程日记 2025/8/12 5:08:41

spring 创建单例 Bean 源码分析

一、创建单例Bean 1、创建单例 Bean 通过方法getBean()来创建单例bean。 代码入口&#xff1a; org.springframework.beans.factory.support.DefaultListableBeanFactory#preInstantiateSingletons spring boot version&#xff1a;2.6.13 org.springframework.beans.factory…...

编程日记 2025/8/14 8:49:34

GetCurrentTime

在实际编程中难免要获取当前时间并且进行格式化&#xff0c;本文给出了多种 GetCurrentTime() 方法以供选择。 C语言下使用strftime C 语言中可以使用 <time.h> 中的函数来获取和格式化时间 #include <stdio.h> #include <time.h>char* getCurrentTime() …...

编程日记 2025/8/15 12:03:26

HTB 学习笔记 【中/英】《Web 应用简介》P1

&#x1f4cc; 这篇文章讲了什么&#xff1f; 介绍了 Web 应用 的概念、架构&#xff0c;以及与传统网站的区别。重点讲解了 Web 安全风险&#xff0c;包括 常见攻击方法&#xff08;SQL 注入、文件包含、不安全的文件上传等&#xff09;。介绍了 Web 渗透测试 的重要性&#…...

编程日记 2025/8/14 5:10:45

ROS catkin_make编译报错问题

对问题 CMake Error at graduation_design/CMakeLists.txt:226 (add_dependencies): The dependency target "graduation_design_generate_messages_cpp" of target "listener" does not exist 检查 generate_messages() 是否被注释 对 CMake Error at …...

编程日记 2025/8/13 6:40:15

【结构设计】3D打印创想三维Ender 3 v2

【结构设计】3D打印创想三维Ender 3 v2 文章目录 前言一、Creality Slicer1.2.3打印参数设置二、配件更换1.捆扎绑扎线2.气动接头3D打印机配件插头3.3D打印机配件Ender3pro/V2喷头套件4.读卡器 TF卡5.micro sd卡 三、调平四、参考文章总结 前言 使用工具&#xff1a; 1.创想三…...

编程日记 2025/8/14 16:59:18

并发编程2

接并发编程1 synchronized锁的实现 通过底层指令控制实现&#xff0c;Java提供的一种原子性内置锁&#xff0c;在进入synchronized后会从主内存复制一份共享变量到自己的工作内存&#xff0c;在工作内存中修改完成后&#xff0c;退出时会把工作内存的值写入到主内存&#xff…...

编程日记 2025/8/11 16:43:30

Linux 中 Git 使用指南：从零开始掌握版本控制

目录 1. 什么是 Git&#xff1f; Git 的核心功能&#xff1a; 2. Git 的安装 Ubuntu/Debian 系统&#xff1a; 验证安装&#xff1a; 3.gitee库 4. Git 的首次配置 配置用户名和邮箱&#xff1a; 查看配置&#xff1a; 5. Git 的基本使用 初始化仓库 添加文件到暂存区…...

编程日记 2025/8/13 22:36:35

C# Exe + Web 自动化 （BitComet 绿灯 自动化配置、设置）

BitComet GreenLight,内网黄灯转绿灯 (HighID), 增加p2p连接率提速下载-CSDN博客 前两天写个这个&#xff0c;每次开机关机后要重来一遍很麻烦的索性写个自动化。 先还是按照上面的教程自己制作一遍&#xff0c;留下Luck 以及 路由器相关的 端口记录信息。 &#xff08;因为自…...

编程日记 2025/8/10 1:07:29

2024年12月CCF-GESP编程能力等级认证C++编程四级真题解析

四级真题的难度： 一、总体难度评价 CCF-GESP编程能力等级认证C++四级真题的难度通常被认为相对较高。它不仅要求考生具备扎实的C++编程基础，还需要考生掌握一定的算法和数据结构知识，以及良好的问题解决能力。 二、具体难度分析 ‌理论知识考察‌： 单选题和判断题中，会涉…...

编程日记 2025/8/10 20:58:49

谷歌Chrome或微软Edge浏览器修改网页任意内容

在谷歌或微软浏览器按F12&#xff0c;打开开发者工具&#xff0c;切换到console选项卡&#xff1a; 在下面的输入行输入下面的命令回车&#xff1a; document.body.contentEditable"true"效果如下&#xff1a;...

编程日记 2025/7/14 0:33:36

《DeepSeek深度使用教程：开启智能交互新体验》Deepseek深度使用教程

《DeepSeek使用教程&#xff1a;开启智能交互新体验》 在当今数字化时代&#xff0c;人工智能技术正以前所未有的速度改变着我们的生活和工作方式。DeepSeek作为一款强大的人工智能工具&#xff0c;凭借其卓越的自然语言处理能力和多领域应用潜力&#xff0c;受到了众多开发者…...

编程日记 2025/8/15 5:40:29

Dijkstra算法

Dijkstra算法&#xff08;迪杰斯特拉算法&#xff09;是一种经典的单源最短路径算法&#xff0c;用于在加权图中找到从一个源点到所有其他顶点的最短路径。它要求图中不能有负权边&#xff0c;因为负权边可能会导致算法的贪心策略失效。 Dijkstra算法的基本思想 Dijkstra算法…...

编程日记 2025/8/11 6:52:48

Python中的静态方法如何使用？

在Python里&#xff0c;类当中的方法可以分为多种不同的类型&#xff0c;其中staticmethod是一个十分有趣而又实用的功能。我们来好好地聊一聊什么是静态方法&#xff0c;它的用途是什么&#xff0c;以及如何在实际应用中使用它们&#xff01; 首先&#xff0c;定义一下静态方…...

编程日记 2025/8/11 23:38:32

【最后203篇系列】016 Q201架构思考

前言 Q200已经达到了我既定的目标&#xff0c;在最近的3个月&#xff0c;我需要进一步完善&#xff0c;达到可以试产的程度。 在这个过程当中&#xff0c;许多知识和体会一直在变。 qtv200到目前&#xff0c;虽然通过习惯(每晚运行离线策略和比对)方式维持了注意力的集中&…...

编程日记 2025/8/15 1:17:45

小脑萎缩会致命吗？

小脑萎缩&#xff0c;顾名思义&#xff0c;是指小脑的体积减小或结构发生异常&#xff0c;进而影响其正常功能。小脑作为人体重要的协调和运动控制中心&#xff0c;负责维持身体平衡、调节肌肉张力和协调运动等关键功能。当小脑出现萎缩时&#xff0c;患者可能会出现步态不稳、…...

编程日记 2025/8/15 12:48:49

pip install和conda install的区别

这里写目录标题 一、什么是 Python 依赖&#xff08;Python Dependencies&#xff09;&#xff1f;1. 依赖的作用2. 如何管理 Python 依赖3. 依赖管理问题4. 依赖锁定总结 二、使用pip安装包venv隔离环境方法 1&#xff1a;使用 venv&#xff08;推荐&#xff09;创建虚拟环境激…...

编程日记 2025/8/10 21:13:46

這是我第一次寫關於aapenal服務器管理控制面板的文章

首先我們來認識一下服務器管理面板的所有功能  網站管理功能&#xff1a; 支持創建和管理多個網站。配置虛擬主機&#xff08;Vhost&#xff09;和域名綁定。自動安裝常用應用&#xff08;如WordPress、Joomla等&#xff09;。  文件管理功能&#xff1a; 文件上傳、…...

编程日记 2025/8/5 1:24:00

requests库的request和response对象的属性和方法

Python requests库 request 参数信息 response 参数信息...

编程日记 2025/7/28 23:59:08

8664蛋糕的美味值

8664蛋糕的美味值 ⭐️难度&#xff1a;中等 &#x1f31f;考点&#xff1a;枚举 &#x1f4d6; &#x1f4da; import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in );int n sc.nextInt();int k s…...

编程日记 2025/8/15 7:38:38

【MySQL】数据库简要介绍和简单应用

目录 数据库简要介绍 SQL 的简单应用 需要注意的&#xff1a; 数据库简要介绍 数据库(database)是指长期存储在计算机内&#xff0c;有组织的、可共享的数据集合。它可视为一个电子化的文件柜&#xff0c;用来存储电子文件,用户可以对文件中的数据进行査询、新增、更新、删…...

编程日记 2025/8/14 18:14:07

yolo环境 pytorch环境配置 CUDA安装

我的成功案例&#xff1a;首先安装python 3.12.9的conda虚拟环境 &#xff08;如果不安装3.12的会报错误ModuleNotFoundError&#xff1a;没有名为“numpy._core”的模块&#xff09; 然后安装11.8cuda &#xff08;其实我是可以最高安装12.6的cuda但我实测&#xff0c;太高版…...

编程日记 2025/8/15 1:10:34

camellia redis proxy v1.3.3对redis主从进行读写分离（非写死，自动识别故障转移）

1 概述 camellia-redis-proxy是一款高性能的redis代理&#xff08;https://github.com/netease-im/camellia&#xff09;&#xff0c;使用netty4开发&#xff0c;主要特性如下&#xff1a; 支持代理到redis-standalone、redis-sentinel、redis-cluster。支持其他proxy作为后端…...

编程日记 2025/8/14 12:12:40

python相关语法的学习文档1

python相关语法的学习文档1 1、tqdm tqdm 是 Python 中一个非常流行的进度条库，可以实时显示循环或任务的进度。它简单易用，支持多种场景（如循环、文件处理、多线程/进程等）。以下是详细的使用讲解： 1.1 安装 pip install tqdm1.2 基本用法 from tqdm import tqdm impo…...

编程日记 2025/8/15 18:32:04

Web元件库 ElementUI元件库+后台模板页面（支持Axure9、10、11）

Axure是一款非常强大的原型设计工具&#xff0c;它允许设计师和开发者快速创建高保真原型&#xff0c;以展示应用或网站的设计和功能。通过引入各种元件库&#xff0c;如ElementUI元件库&#xff0c;可以极大地丰富Axure的原型设计能力&#xff0c;使其更加贴近实际开发中的UI组…...

编程日记 2025/8/12 7:53:27

Java 并发编程——BIO NIO AIO 概念

参考 Java 并发编程——BIO NIO AIO 概念 阻塞与非阻塞、同步与异步概念 系统调用、缓存、物理设备阻塞与非阻塞同步与异步 四种主要的 IO 模型 同步阻塞 IO同步非阻塞 IOIO 多路复用异步 IO select&#xff0c;poll&#xff0c;epoll 系统调用命令...

编程日记 2025/8/11 14:20:40

在微信小程序或前端开发中，picker 和 select 都是用户交互中用于选择的组件，但它们在功能、设计和使用场景上有一定的区别

在微信小程序或前端开发中&#xff0c;picker 和 select 都是用户交互中用于选择的组件&#xff0c;但它们在功能、设计和使用场景上有一定的区别。 1. picker 的特点 描述&#xff1a; picker 是微信小程序中的原生组件&#xff0c;通常用于选择单项或多项值&#xff0c;如时…...

编程日记 2025/8/14 22:47:20

笔记本 Win10 部署阿里通义千问 1.5-0.5B 大模型 mini 版

文章目录 1.环境准备1.1 硬件环境1.2 OS 环境1.3 Python 环境 2.环境安装2.1 CUDA 驱动下载安装2.2 torch 库下载安装2.3 transformers 库安装2.3 accelerate 库安装2.4 验证 CUDA 是否可用2.5 下载 Qwen1.5-0.5B 大模型 3.测试大模型3.1 加载大模型3.2 简单对话3.3 亲测体验感…...

编程日记 2025/8/10 1:24:15

SpringBoot事件驱动

1、概述 Spring事件驱动采用了观察者设计模式&#xff0c;主要作用就是实现对象之间的松耦合通信。它的核心思想是通过事件的发布和监听来实现不同组件之间的交互。&#xff08;跟mq挺像&#xff09; 基础概念&#xff1a; 事件&#xff08;Event&#xff09;: 在Spring中&am…...

编程日记 2025/8/14 6:11:20

nginx中间件部署

普通权限账户安装NGINX中间件 1、拥有高级权限的账户安装必要的插件 sudo yum install -y gcc-c make pcre pcre-devel zlib zlib-devel openssl openssl-devel 2、普通账户进行NGINX的脚本式安装 vi nginx_intall.sh #!/bin/bash TAR_NAME"$1" TAR_NAME_DIRba…...

编程日记 2025/8/14 13:32:23

Qt程序基于共享内存读写CodeSys的变量

文章目录 1.背景2.结构体从CodeSys导出后导入到C2.1.将结构体从CodeSys中导出2.2.将结构体从m4文件提取翻译成c格式 3.添加RTTR注册信息4.读取PLC变量值5.更改PLC变量值 1.背景 在文章【基于RTTR在C中实现结构体数据的多层级动态读写】中&#xff0c;我们实现了通过字符串读写…...

编程日记 2025/8/10 20:41:05

vulnhub-Hackme-隧道建立、SQL注入、详细解题、思路清晰。

vulnhub-Hackme-隧道建立、SQL注入、详细解题、思路清晰。 一、信息收集 2025.3.14 PM 12&#xff1a;18 1、主机发现 arp-scan -l nmap -sn 192.168.66.0/24 2、端口扫描 1、nmap --min-rate 10000 -p- 192.168.66.182 -oA port 查看所有开放端口2、map -sS -sV 192.168.6…...

编程日记 2025/8/13 13:25:02

技术-NBIOT

是什么&#xff1f; 窄带物联网&#xff08;Narrow Band Internet of Things, NB-IoT&#xff09;成为万物互联网络的一个重要分支支持低功耗设备在广域网的蜂窝数据连接&#xff0c;也被叫作低功耗广域网(LPWAN)NB-IoT支持待机时间长、对网络连接要求较高设备的高效连接NB-Io…...

编程日记 2025/8/3 20:36:42

【论文阅读】AlexNet——深度学习奠基作之一

原文链接 Step 1 1. titleabstract 第一句&#xff1a;告诉我干了什么事情 我们训练了一个很大很深的卷积神经网络&#xff0c;用来对120w个图片作分类&#xff0c;这里面有1000个类 第二句&#xff1a;结果 在测试集上面&#xff0c;top-1 error37.5%&#xff0c;top-517.0…...

编程日记 2025/8/11 2:50:19

【云原生技术】编排与容器的技术演进之路

一、编排与容器的技术演进之路 1.1 DockerClient 此时 K8s 只是编排领域的一个选择&#xff0c;而 Docker 此时一家独大&#xff0c;所以 K8s 的客户端只 是作为 Docker 的客户端来调用 Docker 引擎来完成服务。 1.2 RUNC&Shim OCI催生 runcrunc&#xff0c;剥离 Docke…...

编程日记 2025/8/11 19:14:10

鸿蒙编译框架插件HvigorPlugin接口的用法介绍

鸿蒙系统中HvigorPlugin接口实现自定义编译插件&#xff0c;实现编译前后自定义功能。 在鸿蒙&#xff08;HarmonyOS&#xff09;开发中&#xff0c;HvigorPlugin 是用于扩展 Hvigor 构建工具功能的接口。通过实现此接口&#xff0c;开发者可以自定义构建任务、修改构建流程或…...

编程日记 2025/8/15 1:23:50

Springboot+mybatis实现增删改查操作

继续写一下删除操作&#xff0c;删除有些不一样&#xff0c;首先在controller里面&#xff0c;我们需要改一下路由&#xff0c;我们后面要写/{id}传入路径参数&#xff0c;用PathVariable注解绑定id&#xff0c;剩下的都一样&#xff0c;传入id&#xff0c;然后写service和mapp…...

编程日记 2025/7/24 13:21:35

Java中的I/O

1.I/O流 1.1I/O概述 1.2.基本用法 1.3.字节输出流写数据的细节 1.4.FileOutPutStream写数据的三种方式 明天再更~~~~&#xff0c;先混个流量券。...

编程日记 2025/6/28 7:19:54

前端组件封装艺术：设计原则与最佳实践指南

文章目录 一、组件封装的核心原则1.1 设计原则概览1.2 组件生命周期 二、组件设计准则2.1 单一职责原则2.2 高内聚低耦合 三、组件接口设计3.1 Props设计规范3.2 代码示例 四、组件状态管理4.1 状态设计原则4.2 代码示例 五、组件样式处理5.1 样式方案对比5.2 代码示例 六、组件…...

编程日记 2025/8/15 8:31:10

SpringMVC（五）拦截器

目录 拦截器基本概念 一 单个拦截器的执行 1 创建拦截器 2 SpringMVC配置&#xff0c;并指定拦截路径。 3 运行结果展示&#xff1a; 二 多个拦截器的执行顺序 三 拦截器与过滤器的区别 拦截器基本概念 SpringMVC内置拦截器机制&#xff0c;允许在请求被目标方法处理的…...

编程日记 2025/8/1 17:11:38

jupyter无法转换为PDF，HTMLnbconvert failed: Pandoc wasn‘t found.

无法转为PDF 手动下载工具 https://github.com/jgm/pandoc/releases/tag/3.6.3 似乎跟我想的不大一样&#xff0c;还有新的报错 https://nbconvert.readthedocs.io/en/latest/install.html#installing-tex 不知道下的啥玩意儿 sudo apt-get install texlive-xetex texlive-fon…...

编程日记 2025/8/12 9:06:40