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,访问真实接口地址