vue3 + springboot 简单部署到Windows服务器以及可能遇到的问题

网上将项目部署到服务器的参考很多,这里只介绍简单部署的方式。


目录

一、准备工作

二、vue部署

1、打包vue项目

 2、将dist文件夹拷贝到Nginx的安装目录下

 3、配置Nginx

(1)  修改服务器ip地址和端口号

(2) 修改打开的.html文件地址

4、启动Nginx

5、在浏览器中打开网页

6、问题:输入ip和端口号以后,网站是空白页??

三、后端部署

1、在服务器的某个盘中新建一个文件夹demo

2、下载WinSW

3、package打包springboot项目

4、新建一个.xml文件,文件名为项目名

 5、安装服务

6、测试

 四、建立前端和后端的连接

 五、问题:刷新页面以后,页面404

 六、问题:项目里用到webSocket,前端一直报错


一、准备工作

为了能在服务器上正常运行前端和后端,需要在服务器上下载以下内容

(1) 安装Nginx —— 用于部署vue(nginx: download

(2) 安装mysql —— 数据库

(3) 下载WinSW —— 用于部署springboot项目(Releases · winsw/winsw · GitHub

(4) 安装jdk —— 让后端项目在服务器上独立运行的关键(记下安装路径)

二、vue部署

1、打包vue项目

将vue项目打包成dist文件夹,在package.json文件中,点击build进行打包

 2、将dist文件夹拷贝到Nginx的安装目录下

找到Nginx的安装目录下的 html目录

 将dist文件夹放到这个目录下

 3、配置Nginx

进入上面的conf 目录下,打开 nginx.conf文件

目前先修改两处地方,因为vue项目和springboot项目是分开部署到服务器上的,所以后面vue访问后端还需要做一定的调整。

(1)  修改服务器ip地址和端口号

 因为现在是把vue前端交给了Nginx代理,所以这里的端口号不一定是我们在vue项目中设置的端口号。这里的端口号必须是当前服务器开放的端口号。

(2) 修改打开的.html文件地址

 Nginx在开始运行以后,运行的就是root对应的路径下的 index.html文件,我们要让Nginx运行我们dist文件夹中的index.html文件。

4、启动Nginx

先打开Nginx安装路径下的命令行

输入start nginx,就可以启动Nginx了,要查看是否启动成功,可以进入logs目录下,如果有nginx.pid,说明启动成功。这里的error.log 记录着网页出现问题时的错误信息。

输入 nginx -s stop,就可以停止Nginx了,更多指令可以自行百度。

 注意:不建议使用IE浏览器打开,可能会出现404 Not Found

5、在浏览器中打开网页

在浏览器地址栏输入Nginx中修改的ip地址和端口,如果可以显现界面就说明启动正常。

6、问题:输入ip和端口号以后,网站是空白页??

我在部署的过程中曾经遇到这样的问题,打开以后,网站是空白的,也没有什么404 Not Found,我们项目是vue3.0的,所以我在vue.config.js中加了这么一些内容

三、后端部署

1、在服务器的某个盘中新建一个文件夹demo

2、下载WinSW

下载路径: Releases · winsw/winsw · GitHub

打开网址以后,向下滑,可以找到下面的内容,并下载 WinSW.NET4.exe,将下载好的WinSW.NET4.exe拷贝到上面创建好的demo文件夹中,并将 .exe文件的名字重命名为你的项目名。

3、package打包springboot项目

在打包之前,你需要将你项目中application.properties或者application.yml的 mysql 登录密码改为服务器中mysql的登录密码。然后再打包。

这里打包后端采用的是较为直接的方式。打包完成后,我们可以在target文件夹下找到 jar包, 将这个jar包拷贝到demo文件夹中。

4、新建一个.xml文件,文件名为项目名

将下面的内容拷贝到这个 xml文件中,当然,需要稍加修改

<configuration>
  
  <!-- ID of the service. It should be unique accross the Windows system-->
  <id>faultDetectionService</id>
  <!-- Display name of the service -->
  <name>faultDetectionService</name>
  <!-- Service description -->
  <description>This service is a service cratead from a minimal configuration</description>
  
  <!-- Path to the executable, which should be started -->
  <executable>C:\Program Files\Java\jre1.8.0_202\bin\java.exe</executable>
  
  <arguments>-jar demo-0.0.1-SNAPSHOT.jar</arguments>

</configuration>

 5、安装服务

打开当前目录下的命令行,输入  xxx.exe install

 继续输入 net start

安装成功以后,打开任务管理器,选择“服务”,找到和你项目名同名的服务,启动该服务,到此你的后端就已经开始运行了。

6、测试

我们可以使用postman来测试是否可以访问到后端,先让上面的服务启动,打开postman,输入后端的请求地址,如果能正常获取到后端返回的内容说明后端无异常。

 四、建立前端和后端的连接

因为前端和后端是分开部署到服务器上的,为了让后端可以接收到前端的请求,我们需要搭建起前端和后端的连接。关于这个,我也弄了很久,因为我的跨域处理是放在前端的vue.config,js中的,看网上说,vue部署到服务器以后,跨域处理会失效,所以跨域处理要放在 Nginx中,到现在我也搞不清楚是为什么。

我在vue里的设置如下

vue里我不做修改,我主要是在nginx.conf中添加代理内容,添加的内容如下,9090是我的后端端口号。

 五、问题:刷新页面以后,页面404

我的做法是加上下面两部分内容

 六、问题:项目里用到webSocket,前端一直报错

部署到服务器上以后,因为项目中用到了webSocket,不知为什么,一直在报错。

网上了解了一下,这里的localhost要改成服务端的ip地址,在代码中是这样。

 如果还会报下面这样的错误,那就试着把防火墙关了

  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: Vue 3 和 Spring Boot 是一对强大的技术组合,可用于搭建现代化的后台管理系统。下面是一个基本的指南,介绍如何从零开始搭建一个 Vue 3 + Spring Boot 后台管理系统。 首先,我们需要准备开发环境。在电脑上安装好 Node.js 和 Java JDK,并配置好环境变量。然后,安装 Vue CLI 和 Spring Boot CLI,这些工具将帮助我们创建和管理项目。 第二步是创建一个新的 Spring Boot 项目。使用 Spring Boot CLI,我们可以快速创建一个空的 Spring Boot 项目,并进行基本的配置。可以使用命令行,输入如下命令来创建项目: ``` $ spring init --name=my-project --groupId=com.example --artifactId=my-project --dependencies=web my-project ``` 这将创建一个名为 my-project 的 Spring Boot 项目。 接下来,我们可以创建一个 Vue 3 项目。使用 Vue CLI,我们可以选择一个预定义的模板,例如 Vue Router 和 Vuex,以及一些常用的插件。可以使用命令行,输入如下命令来创建项目: ``` $ vue create my-project ``` 这将创建一个名为 my-project 的 Vue 3 项目。 现在,我们已经有了一个空的 Spring Boot 项目和一个空的 Vue 3 项目。接下来,我们需要将这两者连接起来。 在 Vue 3 项目中,可以使用 axios 或者 fetch 来发送请求到后端。在 Spring Boot 项目中,可以使用 Spring Data JPA 来管理数据库,Spring Boot Security 来进行身份验证和授权。 我们可以编写 RESTful API 接口,用于在前端和后端之间传输数据。同时,也需要编写前端组件和页面,以及后端的 Controller 和 Service 层代码,来实现各种功能。 最后,我们可以使用打包和部署工具,将项目打包为可部署的文件,并将其部署服务器上。例如,可以使用 Maven 将 Spring Boot 项目打包为 Java 可执行文件(JAR 文件),并使用 Nginx 或 Apache 将 Vue 3 项目部署为静态文件。 总之,使用 Vue 3 和 Spring Boot 可以快速搭建一个功能丰富的后台管理系统。只需按照上述步骤创建项目、编写代码、连接前后端,最后打包部署即可。当然,在实际开发过程中还需要考虑安全性、性能优化和代码质量等方面的问题,这些都需要进一步的学习和实践。 ### 回答2: Vue3是一个流行的JavaScript框架,用于构建用户界面。Spring Boot是一个基于Java的框架,用于构建快速且易于配置的应用程序。下面是在Vue3和Spring Boot中从零搭建后台管理系统的步骤: 1. 搭建Spring Boot后端: - 在IDE中创建一个新的Spring Boot项目。 - 添加所需的依赖项,如Spring Security、Spring Data JPA和MySQL数据库驱动程序。 - 创建实体类和存储库接口,用于管理系统数据的持久化。 - 创建控制器类,用于处理来自前端的请求,并调用适当的服务方法。 - 配置数据库连接和安全性设置。 - 运行应用程序,确保后端正常工作。 2. 搭建Vue3前端: - 在命令行中使用Vue CLI创建一个新的Vue3项目。 - 在Vue3项目中安装所需的依赖项,如Vue Router和Axios。 - 创建路由配置文件,定义前端路由和对应的组件。 - 创建后台API服务文件,使用Axios发送HTTP请求到后端。 - 创建所需的组件,如登录、注册、用户管理和权限管理。 - 配置应用程序的主要入口点,并将路由和组件添加到Vue实例中。 - 运行应用程序,确保前端正常工作。 3. 连接前端和后端: - 在Vue3中使用Axios调用后端API。 - 在Spring Boot中创建适当的控制器和服务方法,以接收和处理来自前端的请求。 - 在Vue3中处理返回的数据,并根据需要进行展示和处理。 4. 完善功能和界面设计: - 根据系统需求和设计规范,完善后台管理系统的功能和界面。 - 添加用户认证和授权功能,确保只有授权用户才能访问特定页面和功能。 - 使用Vue3的组件化和响应式特性,实现良好的用户体验。 - 进行测试和调试,确保系统稳定性和安全性。 以上是使用Vue3和Spring Boot搭建后台管理系统的一般步骤,具体的实施过程可能因项目需求和个人偏好而有所不同。在开始搭建项目之前,建议先了解Vue3和Spring Boot的基本知识,并参考官方文档和教程,以帮助顺利完成项目。 ### 回答3: 搭建一个基于Vue3和Spring Boot的后台管理系统,需要经过以下步骤: 1. 确保你已经安装了Node.js和Java开发环境。可以从官网上下载并按照指引进行安装。 2. 创建Vue3项目。使用命令行工具或者Vue CLI来创建一个新的Vue3项目。运行命令`vue create project-name`,然后根据指引选择需要的配置项,比如包管理工具、路由、状态管理等。等待项目创建完成。 3. 构建前端界面。在Vue3项目中,根据需求使用Vue组件来搭建前端界面。可以使用Vue3提供的Composition API来编写组件逻辑,通过Vue Router来管理路由,使用Vuex来管理状态。 4. 编写API接口。使用Spring Boot来构建后端服务。创建一个Spring Boot项目,添加所需的依赖,如Spring Web、Spring Data JPA等。编写API接口的Controller类,定义各个接口的URL映射和请求处理方法。 5. 连接数据库。使用Spring Data JPA或其他适当的技术在后台系统中连接数据库。配置数据库连接信息,创建实体类和仓库接口,实现对数据库的增删改查操作。 6. 实现前后端交互。在Vue3项目中,使用axios或其他合适的HTTP库发送HTTP请求到后端接口,获取数据并进行展示。前端页面通过调用API接口来实现数据的增删改查操作。 7. 运行和部署。在开发过程中可以使用命令行运行Vue3前端项目和Spring Boot后端项目,通过不同的端口来访问前后端。在开发完成后,可以使用打包工具如Webpack将前端项目打包成静态文件,然后将打包结果部署服务器,运行Spring Boot项目。 通过以上步骤,你就可以搭建一个基于Vue3和Spring Boot的后台管理系统。这个系统可以实现前后端分离,通过API接口进行数据交互,具备良好的可扩展性和可维护性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值