Nginx发布Vue（ElementPlus），与.NETCore对接（腾讯云）

已于 2025-05-03 13:58:40 修改
阅读量763 收藏 16
点赞数 8
文章标签： nginx vue.js .netcore
于 2025-05-03 13:41:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly1h1/article/details/147678151
版权

案例资料链接：https://download.csdn.net/download/ly1h1/90745660

1.逻辑说明

1.1 逻辑示意图

# 前端请求处理逻辑图

浏览器请求流程:
1. 浏览器发起请求
   ├─ 开发环境(DEV)
   │  ├─ 请求URL: http://192.168.0.102:3000/api/xxx
   │  └─ 被Vite代理处理
   └─ 生产环境
       ├─ 请求URL: /api/xxx
       └─ 被Nginx处理

Vite代理处理(开发环境):
1. 接收 /api 开头的请求
2. 转发到 target: http://43.162.118.209:7127
3. 保留原始 /api 前缀
4. 添加 changeOrigin 和 secure:false 配置

Nginx处理(生产环境):
1. 监听 8061 端口
2. 路由匹配:
   ├─ / → 静态资源
   │  ├─ root: C:/nginx/dist3
   │  └─ 返回 index.html
   └─ /api → 反向代理
       ├─ 转发到 http://43.162.118.209:7127
       ├─ 设置 Host 头
       └─ 添加CORS头:
           ├─ Access-Control-Allow-Origin: http://43.162.118.209:8061
           └─ Access-Control-Allow-Methods: GET,POST,OPTIONS

后端服务:
1. 运行在 http://43.162.118.209:7127
2. 接收来自:
   ├─ 开发环境: Vite代理的请求
   └─ 生产环境: Nginx代理的请求

1.2 时序图

1.3 架构拓扑图

2.前端

2.1 vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  server: {
    host: '192.168.0.102', // 允许通过IP访问
    port: 3000,            // 默认端口（可自定义）
    proxy: {
      '/api': {
        target: 'http://43.162.118.209:7127',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '/api') // 关键修改：保留/api前缀
      }
    }
  }
})

host：是前端开发环境下的启动地址

port：是前端开发环境下的启动端口

proxy：属于用来做跨域转换的

2.2 request.js(接口请求的方法，独立出来了)

import axios from 'axios'
import { ElMessage } from 'element-plus'


const service = axios.create({
  baseURL: import.meta.env.DEV
    ? 'http://192.168.0.102:3000/api'  // 开发环境走Vite代理
    : '/api',                          // 生产环境走Nginx代理
  timeout: 10000
})


// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可在此添加token等全局headers
    // const token = localStorage.getItem('token')
    // if (token) config.headers.Authorization = `Bearer ${token}`
    return config
  },
  error => {
    console.error('Request Error:', error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 根据后端数据结构调整
    const res = response.data
    if (res.code && res.code !== 200) {
      ElMessage.error(res.message || '请求失败')
      return Promise.reject(res)
    }
    return res
  },
  error => {
    console.error('Response Error:', error)
    ElMessage.error(error.message || '服务异常')
    return Promise.reject(error)
  }
)

/**
 * 封装GET请求
 * @param {string} url 
 * @param {object} params 
 * @returns 
 */
export function get(url, params = {}) {
  return service({ url, method: 'GET', params })
}

/**
 * 封装POST请求
 * @param {string} url 
 * @param {object} data 
 * @returns 
 */
export function post(url, data = {}) {
  return service({ url, method: 'POST', data })
}

export function getValues() {
  return service.get('/Values') // 明确使用GET
}

export default service

重点讲解

const service = axios.create({
  baseURL: import.meta.env.DEV
    ? 'http://192.168.0.102:3000/api'  // 开发环境走Vite代理
    : '/api',                          // 生产环境走Nginx代理
  timeout: 10000
})

这段代码创建了一个配置化的 Axios 实例，主要实现了：

  • 环境区分：通过 import.meta.env.DEV 判断当前是开发环境还是生产环境

  • 动态 baseURL：

    • 开发环境：http://192.168.0.102:3000/api

    • 生产环境：/api（对接前面vite.config.js的配置）

  • 全局超时设置：10秒（timeout: 10000）

2.3 App.Vue

实现业务应用，接口请求获取数据，呈现在el-table控件

<template>
  <div>
    <el-button type="primary" @click="fetchData">获取API数据</el-button>
    
    <el-table :data="tableData" v-loading="loading">
      <el-table-column prop="aaa" label="AAA" />
      <el-table-column prop="baa" label="BAA" />
      <el-table-column prop="caa" label="CAA" />
      <el-table-column prop="daa" label="DAA" />
    </el-table>
  </div>
</template>

<script>


import { get } from './api/request'

export default {
  data() {
    return {
      tableData: [],
      loading: false
    }
  },
  methods: {
    async fetchData() {
      try {
        this.loading = true
        const response = await get('/Values')  // 使用封装的get方法
        this.tableData = response.data || response  // 根据实际返回结构调整
      } catch (error) {
        console.error('获取数据失败:', error)
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

3.后端

3.1 Program.cs

using Microsoft.Extensions.Options;

var builder = WebApplication.CreateBuilder(args);

// 添加必要服务（修正版）
builder.Services.AddControllers();

// 正确配置Swagger（需要先安装NuGet包）
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new() { Title = "My API", Version = "v1" });
});

// 配置CORS
builder.Services.AddCors(options =>
{
    options.AddPolicy("VueFrontend", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});



var app = builder.Build();

// 中间件顺序非常重要！
app.UseRouting();
app.UseCors("VueFrontend");

// 开发环境配置
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
    });
}

app.UseAuthorization();
app.MapControllers();

app.Run("http://0.0.0.0:7127");

是一个典型的 ASP.NET Core Web API 的启动配置，主要包含以下核心功能：

1. 基础服务配置

  • AddControllers()：启用 MVC 控制器，用于处理 HTTP 请求（REST API）。

  • AddEndpointsApiExplorer() + AddSwaggerGen()：集成 Swagger/OpenAPI，自动生成 API 文档（需安装 Swashbuckle.AspNetCore NuGet 包）。

    • 访问方式（开发环境）：/swagger 或 /swagger/v1/swagger.json。

2. CORS（跨域资源共享）配置

  • AddCors() 定义了一个名为 "VueFrontend" 的策略，允许：

    • 任意来源（AllowAnyOrigin）

    • 任意 HTTP 方法（AllowAnyMethod）

    • 任意请求头（AllowAnyHeader）

  • UseCors("VueFrontend") 启用该策略，确保前端（如 Vue.js/React）可以跨域访问 API。

3. 中间件（Middleware）顺序

ASP.NET Core 的中间件顺序非常重要，此代码按推荐顺序配置：

  1. UseRouting()：路由匹配。

  2. UseCors()：必须在路由之后、授权之前启用 CORS。

  3. UseAuthorization()：身份认证（如 JWT）。

  4. MapControllers()：映射控制器路由。

4. 开发环境优化

  • UseSwagger() + UseSwaggerUI()：仅在开发环境启用 Swagger，方便调试 API。

5. 自定义运行地址

  • app.Run("http://0.0.0.0:7127")：

    • 监听所有网络接口（0.0.0.0），而不仅仅是 localhost。

    • 端口 7127，可通过 builder.Configuration 或环境变量动态配置。

3.2 接口代码

ValuesController.cs

using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;

namespace WebApplication9.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {

        [HttpGet]
        public List<ClassModel> Get() 
        {
            List < ClassModel > classes = new List<ClassModel> ();
            for (int A = 0; A < 5; A++)
            {
                ClassModel classModel = new ClassModel()
                {
                    AAA = "a" + A.ToString(),
                    BAA = "b" + A.ToString(),
                    CAA = "c" + A.ToString(),
                    DAA = "d" + A.ToString(),
                };
                classes.Add(classModel);
            }
            return classes;
        }
    }
}
-----------------------------
namespace WebApplication9
{
    public class ClassModel
    {
        public string AAA {  get; set; }
        public string BAA { get; set; }
        public string CAA { get; set; }
        public string DAA { get; set; }
        
    }
}

4.Nginx配置

4.1 Nginx.conf

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    server {
        listen       8061;
        server_name  43.162.118.209;
        location / {
            root C:/nginx/dist3;
            try_files $uri $uri/ /index.html;
        }

       location /api {
       # proxy_pass http://localhost:7127/api;
        #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_cookie_flags ~ secure samesite=none;
        proxy_pass http://43.162.118.209:7127;
        proxy_set_header Host $host;
        
        # CORS头（与后端保持一致）
        add_header 'Access-Control-Allow-Origin' 'http://43.162.118.209:8061';
        add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
    }

    }
}

1. 核心配置概述

  • 工作进程：worker_processes 1;

    • 仅启用 1 个 Worker 进程，适合低负载场景，生产环境建议设为 CPU 核心数。

  • 事件模块：worker_connections 1024;

    • 每个 Worker 进程支持 1024 个并发连接。

2. HTTP 服务配置

全局配置

  • include mime.types;

    • 引入 MIME 类型文件，用于正确识别文件类型（如 .html、.js）。

  • default_type application/octet-stream;

    • 默认响应类型为二进制流（若未匹配到 MIME 类型）。

Server 块

  • 监听端口：8061，绑定到 IP 43.162.118.209。

  • 静态资源服务：

    nginx

    复制

    下载

    location / {
    root C:/nginx/dist3;
    try_files $uri $uri/ /index.html;
}

    • 根目录：C:/nginx/dist3（前端项目部署路径）。

    • 路由回退：try_files 确保前端路由（如 Vue/React）直接访问子路径时返回 index.html，避免 404。

API 代理配置

nginx

复制

下载

location /api {
    proxy_pass http://43.162.118.209:7127;
    proxy_set_header Host $host;
    add_header 'Access-Control-Allow-Origin' 'http://43.162.118.209:8061';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS';
}

  • 反向代理：将 /api 请求转发到后端服务 http://43.162.118.209:7127。

  • 请求头设置：

    • Host 头传递客户端原始域名。

  • CORS 支持：

    • 允许来自 http://43.162.118.209:8061 的跨域请求，仅开放 GET/POST/OPTIONS 方法。

5.配置安全组和入站规则

6.运行效果

观无
关注
基于vol.NetCore vue低代码开发使用文档
hxshxs的博客
05-27 6715
vol文档
视频谈话记录和直播系统的实现（二）blazor+srs+nginx开发和运行环境搭建
记录行业应用项目开发历程
11-10 1460
利用.netcore blazor srs ffmpeg nginx webrtc efcore等技术实现视频谈话记录和直播系统
win10环境docker部署mysql、vue项目和springboot项目
lw_2352的博客
04-05 709
本篇主要是在本地用docker部署mysql、vue项目和springboot项目，记录一下。 一、docker部署mysql 我的环境是win10，用的是docker desktop。安装很简单。照着官网的步骤安装即可。 接下来部署mysql 1.1 创建目录 首先在D盘创建目录，这里的目录是为了容器内部挂载数据，方便我们查看数据。 D:\docker\mysql 1.2 下载镜像 接下来需要从docker官方下载镜像文件以部署mysql服务。 在命令行输入指令，即可下载mysql官方镜像。也可以指定下
【音视频通话】使用asp.net core 8+vue3 实现高效音视频通话
weixin_41057366的博客
09-13 597
引言 　　　　在三年前，写智能小车的时候，当时小车上有一个摄像头需要采集，实现推拉流的操作，技术选型当时第一版用的是nginx的rtmp的推拉流，服务器的配置环境是centos，2H4G3M的一个配置，nginx的rtmp的延迟是20秒，超慢，后来研究了SRS以及ZLMediaKit这两个开源的推拉流服务器，没记错的话，两个都是基于c++开发的，性能都很棒，后来更换了推拉流服务器，小汽车的延迟在...
我的『MVP.Blazor』快速创建与部署
dotNET跨平台
06-05 1520
‍最近一直在录Blog.Core相关的操作视频，也没有研究过什么新的东西，公司也各种项目迭代，特别是从Fwk迁移到NetCore，真的是不是一个容易的事，闲的时候，为了歇歇脑子，就抽出时...
你应该了解的一些 ASP.NET Core WebAPI 使用小技巧
farway000的博客
11-18 1183
一、前言　　如何构建一个符合规范、容易理解的 API 接口是我们后端开发人员需要考虑的。在本篇文章中，我将列举一些我在使用 ASP.NET Core Web API 构建接口服务时使用到...
.NET Core 6.0 WebAPI 后端项目框架源码
gitblog_09718的博客
09-07 529
.NET Core 6.0 WebAPI 后端项目框架源码 MagCoreAPI.rar项目地址:https://gitcode.com/open-source-toolkit/3db14 项目简介 本项目是一个基于.NET Core 6.0的Web API后端项目框架源码，旨在提供一个开箱即用的后端开发基础。项目采用RESTful风格设计，集成了多种常用组件和工具，帮助开发者快速搭建高效、可扩...
学习资源分享
热门推荐
qq_38116774的博客
05-18 1万+
各大类型学习资料，建了一个网盘群方便大家学习，这是资源目录： 目录：/学习资料 [25.6M] ┣━━.NET [0B] ┃ ┗━━.NETCore开发实战[更多资料关注微信公众号：武培轩] ┣━━安全 [0B] ┃ ┗━━安全攻防技能30讲 ┣━━编辑 [0B] ┃ ┗━━编辑训练营 ┣━━并发 [0B] ┃ ┣━━高并发架构的 36 项修炼 ┃ ┣━━高并发系统设计4
爬虫设计方案
Admin
05-20 7274
文章目录1 引言2 系统主要功能需求3 系统架构3.1整体架构3.2 TS3.3 微服务4.技术方案4.1 爬虫4.1.1 网页抓取4.1.2 解析数据4.1.3 数据存储4.2 微服务4.2.1 Nginx4.2.2 负载均衡4.2.3 反向代理4.2.4 Netcore Web API4.3 数据展示4.3.1 前后端分离4.3.2 Vue4.3.3 百度地图api 1 引言 空着 2 系统主...
.NETCore和VUE部署在Linux-Nginx
weixin_45756851的博客
08-09 1175
Linux-Nginx、Docker篇、vue-elment-admin 部署
nginx-1.18.0已开启gzip压缩优化vue项目大小.zip
10-22
在这个场景中，我们看到一个关于“nginx-1.18.0已开启gzip压缩优化vue项目大小.zip”的压缩包，它涉及到三个主要的技术领域：Nginx、gzip压缩以及Vue Element Admin。下面我们将详细探讨这些知识点。 首先，Nginx是...
nginx 部署 vue 项目找不到js css文件的解决方法
01-11
很多时候 npm run build 之后， index.html 文件中webpack 自动插入的 js 文件 css 文件的相对目录总是不对，发布到服务器上之后，nginx 找不到文件。 vue-cli@3 在 vue-cli@3 中你需要为你 webpack 插入到 index....
nginx+vue.js实现前后端分离的示例代码
11-30
1.nginx 是一个高性能的HTTP和反向代理服务器，常用于分布式服务器管理. 它常用于做负载均衡(通过调用多台服务器达到此目的) 静态资源输出更快，可以对资源实现gzip压缩后输出(这也是本文为什么用它做静态资源访问的...
watch 数组 Vue 3
最新发布
qq_30049249的博客
05-01 248
发现在选项式中配置 watch 监听数组不起作用。且在 setup 中监听数组时，当不设置 deep 参数时，也进行了深度监听。在 setup 中使用 watch 监听数组变化。
基于Springboot + vue实现的列书单读书平台
如果回复的的不及时，请见谅。回复不及时请耐心等待。
04-29 405
书单信息管理：管理书单信息，包括新增、查看、修改、删除和查看评论。用户管理：管理系统中所有用户的信息，包括添加、删除和修改用户。后台管理：管理系统配置，包括轮播图和网站介绍的管理。书单信息管理：用户可以新增和查看书单信息。在线书店管理：用户可以查看在线书店信息。本系统包含管理员和用户两个角色。
JavaWeb：vue&axios
IT瘾君子的博客
04-28 422
JavaWeb、vue、axios、Ajax
Vue 中局部指令（directives）的用法详解
jingling555的博客
04-28 414
局部指令适合封装特定组件的功能，而全局指令则更适合应用于整个应用的通用功能。
vue 实现文件流下载功能 前端实现文件流下载
weixin_41346436的博客
04-29 84
【代码】vue 实现文件流下载功能 前端实现文件流下载。
linux 使用nginx部署vue、react项目
好巧的博客
04-28 833
当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。进入 /usr/local/nginx/conf 目录，找到 nginx.conf 文件，右键选择记事本编辑，修改并保存。在 /usr/local 目录下，新建 nginx 文件夹并进入。所需服务器基础环境，请根据提示进行下载、安装。安装openssl、openssl-devel。安装pcre、pcre-devel。安装zlib、zlib-devel。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值