Spring boot 和 Vue 前后端分离项目的启动部署(详细版)

2023-11-09

一、首先拿到spring boot + vue项目,可以从git 上获取到

        1、spring boot 项目导入idea中启动,运行mian函数启动项目(tomcat端口改为80)
二、安装node(最新版)https://nodejs.org/en/download/(具体安装过程,查百度)

        1、测试node和cpm是否成功
                1.打开黑窗口(win键+x)点击:命令提示符管理员(必须以管理员运行)。
                2.输入node -v  npm -v 
               3.

               4.出现版本号为成功。

三、安装完node以后,黑窗口进入vue项目根路径下。

             1.

             2.运行命令:npm  install   (下载必须的依赖,如果报错了就是node环境有问题,查百度重新搭环境)

             3.运行完上面的命令以后在执行 : npm run build   (这个命令是打包)

             4.出现这个说明已经打包成功:

                5.成功以后你的vue项目下会出现一个dist的文件夹。

             6.打包好vue项目以后,留着dist文件一会用到。

三、准备开始部署。

             1.首先下载nginx服务器(我的nginx是安装到linux系统的,具体安装请自己查资料)

             2.安装好nginx以后,在nginx下随便创建一个文件夹,然后把刚才dist里面的所有文件全部放到你刚在nginx下创建的文件夹里面,然后开始配置nginx(配置文件位置:nginx/conf/nginx.conf)

             3.

           4.然后 vim nginx.conf (编辑这个文件)root:后面改成自己存放dist内容的文件路径, index:后面是固定的

       5.配置完以后按esc 后   在按shirt+zz 退出保存。

       6.然后到nginx目录下的sbin中启动nginx服务器 7/启动:./nginx    重启:./nginx -s reload

       7.好了现在已经把vue项目部署完了,接下来就是解决跨域问题。

四、处理跨域问题(因为俩个代码不在一个服务器中,vue项目在linux中,springboot项目在本地)

  1. 首先下载一个 SwitchHosts 工具。

     3. 打开(右键以管理员身份运行)

                

        4.这个窗口让留着,别关掉,接下来就是修改你vue项目的请求路径了(很重要的一步)。

       5.

       6.修改完以后,吧原来你在nginx下目录中的存放dist的文件删除(三个文件全部删除)然后重新按照上班的打包,在放进去然后在重启nginx。

      7.然后运行vue项目,然后就可以正常拿到数据了。

 

 

 

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Spring boot 和 Vue 前后端分离项目的启动部署(详细版) 的相关文章

  • Github Page 个人主页——项目部署

    本人博客 一 前言 想搭建自己的网站吗 xff1f 通常需要买一台服务器 xff0c 购买一个域名进行备案后 xff0c 解析到自己的服务器 xff0c 还要搭建环境 xff0c 后期运维等等 本文提供一种基于 Github Page 服务
  • CentOS7.9 项目部署java项目

    安装基础环境篇在这 手工部署项目 在IDEA中开发SpringBoot项目并打成jar包 将jar包上传到Linux服务器 span class token function mkdir span usr local app span cl
  • 踏入OpenStack大门,Nova项目部署

    文章目录 一 Nova组件部署环境二 控制节点Nova服务配置2 1 创建nova数据库 xff0c 并执行授权操作2 2 管理Nova用户及服务2 2 1 创建nova用户2 2 2 创建nova服务2 2 3 给Nova服务关联endp
  • 微服务后端部署

    部署分布式微服务 本篇文章教会你从零部署spring cloud微服务的项目 部署 这是一个已经开发完成的spring cloud的项目 对服务进行打包 可以直接在总的项目下 通过maven对项目进行打包 这样系统就会帮助你对各个微服务进行
  • python虚拟环境,conda的安装与使用

    axiner 声明 错了另刂扌丁我 如若有误 记得评论指出 谢谢了 简介 Conda 是一种通用包管理系统 当然包含管理Python 支持linux mac win Anaconda 是一个开源的Python发行版 包含了conda pyt
  • 在AIX系统下搭建一个全新的weblogic服务器

    weblogic服务器作为付费服务器 在各个行业中的使用还是相当广泛的 尤其在金融行业 使用的很多都是weblogic服务器 毕竟 有钱任性 那么在工作的时候肯定会有小伙伴遇到过要自己搭建weblogic服务器的情况 这里整理下本人搭建we
  • 部署项目到服务器

    部署项目到服务器 1 购买服务器 阿里云官网 2 安装宝塔面板 相当于服务器的图形化操作界面 3 开放端口 云服务器端口 宝塔面板端口 4 下载插件 5 部署前后端项目 步骤二 安装宝塔面板 进入到服务器 使用命令安装宝塔 yum inst
  • Windows-tomcat 部署Java项目

    windows 通过 tomcat 部署项目 部署环境准备 JDK下载安装及配置 进入 Oracle官网 的 Java 界面 Oracle官网地址 https www oracle com java 1 JDK下载 1 1 在网站页面滚动鼠
  • TOMCAT-无法成功启动——双击startup.bat闪退的解决办法

    Tomcat无法成功启动 双击startup bat闪退的解决办法 转载 原文链接 https blog csdn net scau lth article details 83218335 这是新手经常会犯的错误 只要注意三个点就可以解决
  • tomcat的Context配置项docBase和path的区别

    1 tomcat的config目录下的server xml中Context配置项docBase和path的区别如下 1 docBase是指项目ROOT所在路径 2 path是指该项目访问的路径 如
  • angular项目从部署到启动

    angular是前端三大框架之一 适合开发大型需要多人合作的项目 代码规范 社区活跃 不过学习曲线陡峭 这篇介绍环境搭建 完成就可以启动ng项目了 一 Node js和npm 在node官网 https nodejs org zh cn d
  • TOMCAT-部署项目-tomcat 不能多启动问题解决方案

    tomcat 不能多启动问题 解决方案 更改tomcat server xml 所有涉及端口 8089 端口 8005 8089 8443 8009 8088 端口 8006 8088 8444 8010
  • facechain环境部署

    环境安装 创建虚拟环境facechain conda create n facechain python 3 8 conda activate facechain 克隆 GIT LFS SKIP SMUDGE 1 git clone htt
  • 设置docker容器镜像加速器(阿里云)

    为了加速Docker容器的拉取 我们可以设置Docker容器镜像加速器 以阿里云镜像加速器为例 您可以按照以下步骤进行设置 1 登录阿里云容器镜像服务 登录阿里云容器镜像服务 注册账号并登录 进入容器镜像服务管理控制台 2 获取镜像加速器地
  • Linux搭建部署JDK1.7环境

    jdk下载 官网链接 https www oracle com java technologies javase javase7 archive downloads html jdk 7u80 oth JPR 打开linux系统的终端 在l
  • IIS 网站安装SSL证书

    步骤一 申请SSL证书 申请免费证书步骤 阿里云申请免费证书步骤 申请完成后 等待证书签发 签发后下载到本地 解压缩后会得到如下两个文件 一个证书文件 一个密码文件 步骤二 将文件复制到服务器上 双击证书文件安装 安装选计算机 安装过程中要
  • tomcat+nginx实现项目部署

    本文主要讲述的项目部署方面的一些基础知识 tomcat nginx的环境 nginx是常用的web服务器 用于获取静态资源 类似的服务器还有apache tomcat是基于java servlet 的 web 容器 用于获取动态资源 一般的
  • web项目部署到某云Linux服务器的详细步骤

    一 安装xshell 和 xftp 1 xshell连接服务器 方式有几种 这里只介绍其中之一 在 某云 密钥对创建密钥对 然后会得到下载的密钥对文件 打开xshell 打开 新建 上图中的主机填某云 实例 中的 然后在xshell 用户身
  • SpringBoot生成docker镜像,完成容器部署

    docker介绍 Docker 是一个开源的应用容器引擎 基于 Go语言 并遵从Apache2 0协议开源 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级 可移植的容器中 然后发布到任何流行的 Linux 机器上 也可以实现
  • DockerCompose的安装以及使用

    docker compose的安装以及使用 docker compose的定义 docker compose是docker容器的单机编排工具 它是一个可以管理多容器的工具 比如可以解决多容器之间的依赖关系 比如启动nginx前端服务的时候会

随机推荐

  • Python __name__与“__main__“是什么意思?

    前言 模块文件的底部 我们经常看见 name 与 main 的代码 如下 if name main pass 而 name main 的结果可能是True 也可能是False 这是为什么呢 name 与 main 分别是什么 name 是当
  • audio接线图解_5.1家庭影院布线之音响如何接线(图文教程)

    实物拍图 内外成色新净 二个光纤 一个同轴 国 际 电压 220V 原装安桥TX SR501功放 马来西亚产 无任何修摩史 各功能完好 功放机用料足 带1组同轴 两组光纤输入 A B两组主音箱切换 耳机输出等等 功放各个频段很平衡 低频不浑
  • Maven 学习笔记十八:Maven仓库(maven仓库介绍)

    Maven仓库 maven仓库介绍 1 何为Maven仓库 maven可以在某个位置统一存储所有maven项目共享的构件 这个统一的位置就是仓库 实际的Maven项目将不会各自存储其依赖文件 它们只需要声明这些依赖的坐标 在需要的时候 例如
  • java8 获取set值_Java8 中有趣酷炫的小技巧

    执行注释 大多数开发人员认为 注释 永远不会在程序中执行 并用于帮助代码理解 但是 它们却 可以被执行 public class Main public static void main String args System out pri
  • React小案例: 点击按钮,数字加1

    大家好 我是梅巴哥er 本次案例较为简单 但是有个核心思想 就是要拿到数字这个值 要想到用e target value 代码如下 import React Component from react export default class
  • linux系统PXE自动装机无人值守

    PXE高效批量网络装机 PXE服务允许客户机通过网络从远程服务器下载引导镜像 并安装文件或整个操作系统 必须满足的前提条件 客户机的网卡支持PXE协议 且主板支持网络引导 网络中有一台DHCP服务器为客户机分配地址 指定引导文件位置 服务器
  • 关键路径算法中的etv和ltv的理解

    etv和ltv的定义 etv 事件的最早发生时间 ltv 事件的最晚发生时间 再晚会耽误工期 关键路径是源点到汇点权值最大的一条路径 这条路径决定了整个工期 关键路径上的关键活动的最早开始的时间和最晚开始的时间应该是相同的 etv ltv
  • java list移除null元素

    list
  • vue延迟渲染组件_vue数组修改的渲染性能问题

    最近用vue做一个小东西 发现了一个奇怪的现象 当模板使用数组进行v if判断时 如果修改数组的值 页面渲染会明显有延迟 示例代码如下 这个更多显示反应有延迟 v name export default data return list i
  • tomcat启动过程中闪退,导致看不到控制台最后的输出内容,如何让控制台输出框保持开启...

    要让 Tomcat 的控制台输出框保持开启 你可以尝试在启动命令中加入参数 catalina sh run 这样 Tomcat 在启动时就会保留控制台输出框 而不会在启动完成后关闭 另外 如果你想查看 Tomcat 启动过程中的输出内容 你
  • 组态王串口服务器虚拟串口,串口服务器USR-N520连接组态王设置步骤

    调试目的 USB RS232或者USB RS485串口线接USR N520串口和电脑USB口 MODBUS SLAVE软件打开COM口 模拟客户串口MODBUS RTU设备 串口服务器USR N520网线和电脑直连 IP设置同网段 在电脑安
  • 安装nginx出现./configure: error: C compiler cc is not found

    当你安装nginx时 输入make或者make install 命令的时候 虚拟机会出现如下的错误 你没有使用root权限来启动 再重新用 sudo 进行 重要提示 在安装nginx的时候记得都要sudo来操作 不然很容易出错的
  • Java内存模型,volatile关键字和CAS算法,

    引言 在前几篇博文中我详细介绍了HashMap的底层实现原理 后来我接连写了三天JVM和GC的一些知识 那些知识偏向于理论 今天换点口味 和大家一起研究学习一下ConcurrentHashMap的底层实现 因为jdk1 8在HashMap和
  • 前端:项目 文件 文件夹 命名规范

    参考博客 简练总结 项目名 小写中划线 文件夹 小驼峰 文件 小写下划线 class id 小写中划线 变量函数 小驼峰 常量 大写 Vue组件 大驼峰 格式化规范 推荐使用Vscode 采用相同的配置 保证格式化统一 项目的格式化遵循es
  • 移动硬盘 使用驱动器X:中的光盘之前需要将其格式化 的 解决办法

    个人习惯 喜欢直接插入 直接拔下U盘或移动硬盘 就是这么任性 今晚 再次任性插上的时候系统提示 使用驱动器X 中的光盘之前需要将其格式化 当时 整个人就呆了 啊 我的资源 我的资源啊 几百G的数据 代码和中间结果啊 啊 啊 肿么办 网上的答
  • 空时自适应处理用于机载雷达——额外的性能结果(Matla代码实现)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 2 1 机载阵列雷达信号环境 2 2 空时处理基础知识 2 3 元素空间空时自适应处理 2
  • MPU6050 获取角度理论推导(三)---9轴融合算法

    再接着上一篇 https mp csdn net postedit 101777722 姿态角解算 互补滤波补充 融合磁力计 前面介绍了互补滤波法的算法流程和程序实现 但是仅仅只是融合了三轴加速度计和三轴陀螺仪的数据解算出姿态 由于机体水平
  • stacking集成模型预测回归问题

    前言 关于各种集成模型 已经有很多文章做了详细的原理介绍 本文不再赘述stacking的原理 直接通过一个案例 使用stacking集成模型预测回归问题 本文通过学习一篇stacking继承学习预测分类问题 对其代码进行了调整 以解决回归问
  • 百度这样搜索,可以去掉广告!

    百度的广告推广 非常影响我们搜索的效率 相信大家深有体会 我们下次搜索的时候 可以在百度链接后面加上 tn simple 这样可以去掉满屏的广告 即是由原来的 https www baidu com 改为 https www baidu c
  • Spring boot 和 Vue 前后端分离项目的启动部署(详细版)

    一 首先拿到spring boot vue项目 可以从git 上获取到 1 spring boot 项目导入idea中启动 运行mian函数启动项目 tomcat端口改为80 二 安装node 最新版 https nodejs org en