vue项目生产环境中,nginx的配置

发布于:2025-05-10 ⋅ 阅读:(18) ⋅ 点赞:(0)

vue的vite.config.js内容如下:

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

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    host: '0.0.0.0',
    proxy: {
      '/api': {
        // target: 'http://localhost:3001',
        target: 'http://192.168.1.2:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist',
    sourcemap: true
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
})

ps:真实接口地址应该是http://192.168.1.2:3001/getKnowledgeList

修改nginx的配置文件:nginx.config

# 全局块
#user  nginx;
worker_processes  auto;

error_log  logs/error.log warn;
pid        logs/nginx.pid;

# events 块
events {
    worker_connections  1024;
}

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

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    # gzip  on;

    # server 块
    server {
        listen       80;
        server_name  192.168.1.2;

        # 网站根目录
        root         "D:\\work\\job\\WebsiteEducationPilotPlatform\\wwwroot\\www\\dist";
        index        index.html index.htm;

        # 处理静态文件请求
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 接口代理配置
        location /api {
        # 后端服务器地址
        proxy_pass http://192.168.1.2:3001; 
        # 修改请求头中的主机信息
        proxy_set_header Host $host; 
        # 修改请求头中的客户端 IP 信息
        proxy_set_header X-Real-IP $remote_addr; 
        # 修改请求头中的客户端 IP 信息
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
        rewrite ^/api(.*)$ $1 break;
    }
        # 错误页面配置
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
}    

注意:rewrite这里,就是去掉路径/api,访问真实接口地址


网站公告

今日签到

点亮在社区的每一天
去签到