ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

前端打包的一些注意事项

前端打包的一些注意事项

框架:vue3 + vite

vite build --mode prodvite 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/;}
}
返回列表