【NODE】vite项目的前后端手动部署流程

不管是做前端还是后端开发，项目做完后都需要上生产环境，也就是运维说的要放到linux服务器上面去。

那前端后端该做哪些工作呢？

部署成功的效果

前端项目

配置vite

js 复制代码

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

// https://vite.dev/config/
export default defineConfig((configEnv) => {
  const viteEnv = loadEnv(
    configEnv.mode,
    process.cwd(),
  ) as unknown as Env.ImportMeta;

  return {
    plugins: [react()],
    // 配置路径别名
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "./src"),
      },
      extensions: [".ts", ".tsx", ".js", ".jsx"],
    },
    base: configEnv.command === "serve" ? viteEnv.VITE_BASE_URL : "/r-admin/",
    server: {
      port: 5173,
      proxy: {
        "/api/": {
          target: "http://ccc.ccccfff:3000/",  // 自己的接口地址
          changeOrigin: true,
          // rewrite: (path) => path.replace(/^\/api/, ""),
        },
      },
    },
  };
});

也就是要判断是configEnv.command是开发还是build模式，公共路径需要区分

开发环境是放到vite虚拟服务器上的根目录下面，所以用默认的viteEnv.VITE_BASE_URL即可
build后放到生产环境是要放在服务器的某个目录这里我的项目是要放到r-admin,所有要配置成/r-admin/
axios的基础路径配置

使用统一的前缀/api/,开发和生产环境都统一做代理转发
dev
pro

bash 复制代码

# 核心配置：解决 history 模式刷新 404
    location / {
        # 尝试按请求的路径查找文件（$uri）或目录（$uri/）
        # 如果都找不到，就内部重定向到 /index.html
        try_files $uri $uri/ /r-admin/index.html;
    }

location /api/ {
        proxy_pass http://www.xxxx.cv:3000;  # 注意末尾的 /，确保路径正确拼接
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;

        # 超时设置（避免长请求被中断）
        proxy_read_timeout 300s;
        proxy_send_timeout 300s;
    }

判断接口是否带上/api/，进行转发

js 复制代码

proxy_pass http://www.xxxx.cv:3000;  # 注意末尾的 /，确保路径正确拼接

这里有点跟dev环境不一样，如果后端接口是需要/api/这一段，转发域名后面就不要加"/",否则就不要这个斜杠，只写接口地址就行

后端部署

js 复制代码

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const morgan = require('morgan');
const responseFormatter = require('./middleware/responseFormatter');
const responseMiddleware = require('./middleware/responseMiddleware');
// 导入路由
const apiRoutes = require('./routes/api');

// 创建Express实例
const app = express();

app.use(cors());                          // 启用跨域请求
app.use(morgan('combined'));               // 日志记录
app.use(bodyParser.json());                // 解析JSON请求体
app.use(bodyParser.urlencoded({ extended: true })); // 解析URL编码请求
// 应用响应格式化中间件
app.use(responseFormatter);
// 应用响应中间件
app.use(responseMiddleware);

// 设置路由前缀
app.use('/api', apiRoutes);

// 404错误处理
app.use((req, res, next) => {
  res.status(404).json({ error: '接口不存在' });
});

// 全局错误处理
app.use((err, req, res, next) => {
  console.error(err.stack);
  res.status(500).json({ error: '服务器内部错误' });
});

module.exports = app;

我这里使用的是nodejs写的api

部署到linux上面，使用pm2启动

js 复制代码

"scripts": {
    "dev": "pm2 start server.js --name express-api --watch server.js"
  },

status为online就说明服务正常启动了，否则就是代码报错导致接口起不来

使用命令查看代码日志

bash 复制代码

pm2 logs express-api [--lines 1000]

这样我们就部署好了，完整的前后端项目就上线了，打开自己的网站，刷新页面看看