若依【vue】部署nginx教程：避免404烦恼

如何将若依项目（SpringBoot + Vue）的前端部署到 Nginx

简介

对于开发人员来说，服务器部署是必备技能。然而，在部署过程中，可能会遇到各种问题，其中前端部署到 Nginx 是最常见的。本指南将详细介绍如何将若依项目（SpringBoot + Vue）的前端部署到 Nginx，并解决访问后端接口时出现的 404 问题。

部署准备

部署之前，请确保完成以下准备工作：

• 安装 Nginx 服务器
• 获取若依项目源代码
• 构建若依项目前端代码
• 将前端代码复制到 Nginx 指定目录

部署步骤

1. 安装 Nginx 服务器

在 Linux 系统中，可通过以下命令安装 Nginx：

sudo apt-get install nginx

2. 获取若依项目源代码

从 GitHub 克隆若依项目源代码：

git clone https://github.com/baomidou/若依.git

3. 构建若依项目前端代码

在若依项目目录中，执行以下命令：

cd 若依/vue
npm install
npm run build

4. 将前端代码复制到 Nginx 目录

Nginx 默认前端代码目录为 /usr/share/nginx/html，可执行以下命令复制代码：

sudo cp -r 若依/vue/dist/* /usr/share/nginx/html

5. 配置 Nginx 配置文件

在 Nginx 配置文件 /etc/nginx/nginx.conf 中添加以下配置：

server {
    listen 80;
    server_name www.example.com;

    location / {
        root /usr/share/nginx/html;
        index index.html;
    }
}

6. 重启 Nginx 服务器

执行以下命令重启 Nginx：

sudo systemctl restart nginx

解决 404 问题

部署完成后，可能会遇到访问后端接口时出现 404 错误。这可能是由于以下原因：

• Nginx 配置文件错误
• 若依项目后端代码部署错误
• 前端代码未正确引用后端接口

可通过以下方法解决 404 问题：

• 检查 Nginx 配置文件
• 检查若依项目后端代码是否正确部署
• 检查前端代码是否正确引用后端接口

代码示例

若依项目使用 Axios 库与后端进行通信。在前端代码中，向后端发送请求的示例如下：

import axios from 'axios';

// 创建一个 Axios 实例，并设置 baseURL
const instance = axios.create({
  baseURL: 'http://localhost:8080', // 若依项目后端接口地址
});

// 向后端发送 GET 请求
instance.get('/api/user').then(res => {
  console.log(res.data);
});

常见问题解答

1. 为什么部署后无法访问前端页面？

   • 检查 Nginx 配置是否正确。
   • 确认前端代码已正确复制到 Nginx 目录。

2. 为什么访问后端接口时出现 404 错误？

   • 检查 Nginx 配置文件是否正确。
   • 确认若依项目后端代码已正确部署。
   • 检查前端代码是否正确引用后端接口。

3. 如何优化 Nginx 配置以提高性能？

   • 使用反向代理功能。
   • 启用 Gzip 压缩。
   • 配置缓存策略。

4. 如何将若依项目部署到其他服务器？

   • 将项目代码部署到服务器。
   • 安装 Nginx 并配置配置文件。
   • 重启 Nginx。

5. 如何将若依项目部署到云平台（如 AWS）？

   • 选择一个云平台（如 AWS）。
   • 创建 EC2 实例并安装 Nginx。
   • 将项目代码部署到 EC2 实例。
   • 配置 Nginx 并重启。