VueBlog 项目常见问题解决方案

VueBlog 项目常见问题解决方案

vueblog 一个前后端分离的简单博客案例，适合刚入门vue，学前后端分离的童鞋！ 项目地址: https://gitcode.com/gh_mirrors/vu/vueblog

项目基础介绍

VueBlog 是一个基于 SpringBoot 和 Vue 开发的前后端分离博客项目。该项目旨在为刚入门 Vue 和前后端分离开发的同学提供一个简单易懂的案例。项目包含了详细的开发文档和讲解视频，适合初学者学习和实践。

主要编程语言：

• Java（后端）
• Vue（前端）

新手常见问题及解决方案

问题1：如何正确配置项目环境？

解决步骤：

1. 安装 Java 开发环境：

   • 确保你的系统上已经安装了 JDK 8 或更高版本。
   • 配置 JAVA_HOME 环境变量，并将其添加到系统的 PATH 中。

2. 安装 Node.js 和 npm：

   • 下载并安装 Node.js（建议使用 LTS 版本）。
   • npm 会随 Node.js 一起安装。

3. 克隆项目代码：

   git clone https://github.com/MarkerHub/vueblog.git
   cd vueblog
   

4. 安装后端依赖：

   cd vueblog-java
   mvn install
   

5. 安装前端依赖：

   cd ../vueblog-vue
   npm install
   

问题2：如何启动项目？

解决步骤：

1. 启动后端服务：

   cd vueblog-java
   mvn spring-boot:run
   

2. 启动前端服务：

   cd ../vueblog-vue
   npm run serve
   

3. 访问项目：

   • 打开浏览器，访问 http://localhost:8080 查看前端页面。
   • 后端服务默认运行在 http://localhost:8081。

问题3：如何解决跨域问题？

解决步骤：

1. 在后端配置跨域支持：

   • 在 vueblog-java 项目的 application.properties 文件中添加以下配置：

     server.port=8081
     spring.mvc.cors.allowed-origins=http://localhost:8080
     

2. 在前端配置代理：

   • 在 vueblog-vue 项目的 vue.config.js 文件中添加以下配置：

     module.exports = {
       devServer: {
         proxy: 'http://localhost:8081'
       }
     }
     

3. 重新启动项目：

   • 按照问题2中的步骤重新启动前后端服务。

通过以上步骤，你应该能够顺利配置和启动 VueBlog 项目，并解决常见的跨域问题。如果在使用过程中遇到其他问题，可以参考项目的开发文档或提交 issue 寻求帮助。

vueblog 一个前后端分离的简单博客案例，适合刚入门vue，学前后端分离的童鞋！ 项目地址: https://gitcode.com/gh_mirrors/vu/vueblog