vite打包,本地nginx部署

来源:15-5 XRender插件集成使用(上)

weixin_慕仰5193989

2025-03-30

打包应该使用什么环境呢?在本地NGINX部署,配置文件该如何配置呢?
采用的"build": "tsc && vite build"进行打包
nginx配置为:

server {
    listen 80;
    server_name localhost;  
    root html/dist;  # 指定前端打包后的文件目录
    index index.html;  # 默认首页文件

    location / {
        try_files $uri /index.html;
    }

    # 代理 API 请求到后端服务器
    location /api/ {
        proxy_pass http://api-driver.marsview.cc/api; # 代理到你的 stag 环境 API
		    # 解决 POST 请求 301 问题
		proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 允许跨域(如果后端没有处理 CORS 问题,可以开启)
		add_header Access-Control-Allow-Origin *;
		add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS, PUT, DELETE';
		add_header Access-Control-Allow-Headers 'Content-Type, Authorization';
	}

运行的时候报错301

Request URL:
http://localhost/api/users/login
Request Method:
POST
Status Code:
301 Moved Permanently
Remote Address:
127.0.0.1:80
Referrer Policy:
strict-origin-when-cross-origin
写回答

1回答

河畔一角

2025-04-20

server {

listen 80;

server_name localhost;

root html/dist; # 指定前端打包后的文件目录

index index.html; # 默认首页文件

location / {

try_files $uri /index.html;

}

# 代理 API 请求到后端服务器

location /api{

proxy_pass http://api-driver.marsview.cc;

}

}

这样就行了

0
0

React18+TS 通用后台管理系统解决方案落地实战

全面提升React高阶技能,灵活驾驭各类后台管理系统开发痛点

625 学习 · 227 问题

查看课程