前端打包的一些注意事项
框架:vue3 + vite
vite build --mode prod 与 vite build --mode production所匹配的配置文件不同。
--mode production → 加载 .env.production 文件
--mode prod → 加载 .env.prod 文件
默认情况 → 加载 .env 和 .env.production
使用npm run build:prod将读取package.json中的build:prod
{
"scripts": {
"build": "vite build",
"build:prod": "???", // 查看这里的实际定义
"dev": "vite",
"preview": "vite preview"
}
}
一般情况下,要根据服务器配置修改.env.production
# 应用访问路径 例如使用前缀 /admin/
VITE_APP_CONTEXT_PATH = '/admin/'
# 生产环境
VITE_APP_BASE_API = '/prod-api'
对应的服务器配置:
server {
listen 80;
server_name your-domain.com;
# 静态资源服务
location /admin/ {
alias /path/to/your/dist/;
try_files $uri $uri/ /admin/index.html;
index index.html;
# 缓存配置
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
}
# API 代理配置
location /prod-api/ {
proxy_pass http://localhost:8077/;
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_connect_timeout 30s;
proxy_send_timeout 30s;
proxy_read_timeout 30s;
}
# ureport 代理配置
location /ureport/ {
proxy_pass http://localhost:8080/ureport/;
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;
}
# 根路径重定向到 admin(可选)
location = / {
return 302 /admin/;
}
}

浙公网安备 33010602011771号