Fenix's BookStore 前端项目常见问题解决方案

Fenix's BookStore 前端项目常见问题解决方案

fenix-bookstore-frontend 与《凤凰架构》中单体、微服务、无服务的后端工程搭配的前端示例代码。 项目地址: https://gitcode.com/gh_mirrors/fe/fenix-bookstore-frontend

项目基础介绍

Fenix's BookStore 前端项目是一个与《凤凰架构》中单体、微服务、无服务的后端工程搭配的前端示例代码。该项目的主要目的是展示不同的后端技术架构，前端部分采用了现代的 MVVM 架构，使得前后端开发可以完全分离。项目的主要编程语言是 JavaScript，使用了 Vue.js 框架进行开发。

新手使用项目时的注意事项及解决方案

1. 项目依赖安装失败

问题描述：
新手在克隆项目后，执行 npm install 命令时，可能会遇到依赖安装失败的问题。

解决步骤：

1. 检查 Node.js 版本：
   确保你的 Node.js 版本符合项目要求。可以在项目根目录下查看 package.json 文件中的 engines 字段，确认所需的 Node.js 版本。

2. 清理 npm 缓存：
   如果依赖安装失败，可以尝试清理 npm 缓存，执行以下命令：

   npm cache clean --force
   

3. 重新安装依赖：
   清理缓存后，重新执行 npm install 命令：

   npm install
   

2. 开发模式下无法启动项目

问题描述：
在执行 npm run dev 命令时，项目无法启动，提示端口被占用或其他错误。

解决步骤：

1. 检查端口占用：
   项目默认使用 8080 端口，如果该端口被占用，可以修改 package.json 中的 dev 脚本，指定其他端口。例如：

   "scripts": {
     "dev": "webpack-dev-server --port 8081"
   }
   

2. 重新启动项目：
   修改端口后，重新执行 npm run dev 命令：

   npm run dev
   

3. 检查配置文件：
   确保项目根目录下的配置文件（如 .env 文件）没有错误配置，特别是与开发环境相关的配置。

3. 前后端联调时请求失败

问题描述：
在开发模式下进行前后端联调时，前端请求后端服务失败，提示网络错误或 404 错误。

解决步骤：

1. 检查后端服务地址：
   确保后端服务已经启动，并且地址配置正确。可以在 src/main.js 文件中检查请求地址的配置。

2. 禁用 Mock.js：
   如果需要与后端联调，需要禁用 Mock.js。修改 src/main.js 文件中的以下代码：

   // eslint-disable-next-line no-constant-condition
   if (process.env.MOCK) {
     require('./api/mock');
   }
   

   将 process.env.MOCK 设置为 false，或者直接注释掉这段代码。

3. 重新启动前端项目：
   修改配置后，重新启动前端项目：

   npm run dev
   

通过以上步骤，新手可以更好地理解和使用 Fenix's BookStore 前端项目，解决常见的问题。

fenix-bookstore-frontend 与《凤凰架构》中单体、微服务、无服务的后端工程搭配的前端示例代码。 项目地址: https://gitcode.com/gh_mirrors/fe/fenix-bookstore-frontend