This commit is contained in:
2025-11-05 13:27:52 +08:00
parent 2fab612906
commit 855d22f448
8 changed files with 275 additions and 21 deletions

View File

@@ -7,6 +7,6 @@ ENV = 'development'
# 路由懒加载 # 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true
VUE_APP_BASE_API = 'http://134.175.126.60:30313' VUE_APP_BASE_API=/jarvis-api
# VUE_APP_BASE_API = 'http://127.0.0.1:30313' # VUE_APP_BASE_API = 'http://127.0.0.1:30313'
port = 8888 port = 8888

View File

@@ -6,5 +6,5 @@ ENV = 'production'
# Jarvis/生产环境 # Jarvis/生产环境
VUE_APP_BASE_API = '/jarvis-api' VUE_APP_BASE_API=/jarvis-api
port = 8888 port = 8888

View File

@@ -63,23 +63,6 @@ server {
proxy_read_timeout 600s; proxy_read_timeout 600s;
} }
# Swagger API文档代理如果需要
location /v3/api-docs/ {
proxy_pass http://127.0.0.1:30313/v3/api-docs/;
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;
}
# Swagger UI代理如果需要
location /swagger-ui/ {
proxy_pass http://127.0.0.1:30313/swagger-ui/;
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;
}
# Druid监控代理如果需要 # Druid监控代理如果需要
location /druid/ { location /druid/ {

View File

@@ -10,7 +10,9 @@ const CompressionPlugin = require('compression-webpack-plugin')
const name = process.env.VUE_APP_TITLE || 'Jarvis' // 网页标题 const name = process.env.VUE_APP_TITLE || 'Jarvis' // 网页标题
// 后端接口地址(仅用于开发环境代理) // 后端接口地址(仅用于开发环境代理)
const baseUrl = process.env.VUE_APP_BASE_API || 'http://127.0.0.1:30313' // 后端接口 // 生产环境应该使用相对路径(如 /dev-api通过nginx代理
// 开发环境可以使用相对路径通过devServer代理或绝对URL
const baseUrl = process.env.VUE_APP_BASE_API || (process.env.NODE_ENV === 'production' ? '/dev-api' : 'http://127.0.0.1:30313')
// 开发环境代理路径如果未设置VUE_APP_BASE_API使用默认代理路径 // 开发环境代理路径如果未设置VUE_APP_BASE_API使用默认代理路径
const devApiPath = process.env.VUE_APP_BASE_API || '/dev-api' const devApiPath = process.env.VUE_APP_BASE_API || '/dev-api'

56
修复环境变量.txt Normal file
View File

@@ -0,0 +1,56 @@
请手动修改以下两个文件:
===========================================
文件1.env.development
===========================================
将以下内容:
VUE_APP_BASE_API = 'http://134.175.126.60:30313'
改为:
VUE_APP_BASE_API=/dev-api
完整文件内容应该是:
# 页面标题
VUE_APP_TITLE=Jarvis
# 开发环境配置
ENV=development
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES=true
# 开发环境使用代理路径通过vue.config.js的devServer代理到后端
VUE_APP_BASE_API=/dev-api
port=8888
===========================================
文件2.env.production
===========================================
将以下内容:
VUE_APP_BASE_API = '/jarvis-api'
改为:
VUE_APP_BASE_API=/dev-api
完整文件内容应该是:
# 页面标题
VUE_APP_TITLE=Jarvis
# 生产环境配置
ENV=production
# 生产环境使用相对路径通过nginx代理到后端
# 注意这里的路径必须与nginx配置中的 location /dev-api/ 保持一致
VUE_APP_BASE_API=/dev-api
port=8888
===========================================
重要提示:
===========================================
1. 注意等号两边不要有空格VUE_APP_BASE_API=/dev-api不是 VUE_APP_BASE_API = /dev-api
2. 不要使用引号(直接写 /dev-api不要写 '/dev-api' 或 "/dev-api"
3. 修改后必须重新打包npm run build:prod
4. 确保nginx配置中的 location /dev-api/ 与前端配置一致

View File

@@ -0,0 +1,20 @@
@echo off
chcp 65001 >nul
echo 正在创建环境变量配置文件...
echo # 开发环境配置 > .env.development
echo # 开发环境使用代理路径通过vue.config.js的devServer代理到后端 >> .env.development
echo VUE_APP_BASE_API=/dev-api >> .env.development
echo # 生产环境配置 > .env.production
echo # 生产环境使用相对路径通过nginx代理到后端 >> .env.production
echo VUE_APP_BASE_API=/dev-api >> .env.production
echo.
echo 环境变量文件创建完成!
echo .env.development - 开发环境配置
echo .env.production - 生产环境配置
echo.
echo 请重新打包项目npm run build:prod
pause

104
快速修复指南.md Normal file
View File

@@ -0,0 +1,104 @@
# 快速修复HTTPS访问后端接口问题
## 问题
访问 `https://jarvis.van333.cn` 时,前端请求仍然是 `http://134.175.126.60:30313/captchaImage`
## 立即执行以下步骤
### 步骤1创建环境变量文件
在项目根目录 `d:\code\ruoyi-vue\` 下,创建两个文件:
#### 文件1`.env.development`
内容:
```
VUE_APP_BASE_API=/dev-api
```
#### 文件2`.env.production`
内容:
```
VUE_APP_BASE_API=/dev-api
```
**创建方法Windows**
1. 在项目根目录打开命令行
2. 执行:
```cmd
echo VUE_APP_BASE_API=/dev-api > .env.development
echo VUE_APP_BASE_API=/dev-api > .env.production
```
或者手动创建:
1. 在项目根目录新建文件 `.env.development`
2. 在项目根目录新建文件 `.env.production`
3. 两个文件内容都是:`VUE_APP_BASE_API=/dev-api`
### 步骤2删除旧的打包文件如果存在
```cmd
cd d:\code\ruoyi-vue
rmdir /s /q dist
```
### 步骤3重新打包
```cmd
npm run build:prod
```
### 步骤4部署到服务器
将 `dist` 目录中的所有文件复制到服务器的 `/www/sites/jarvis.van333.cn/index/` 目录
### 步骤5确认Nginx配置
确保nginx配置文件中包含
```nginx
location /dev-api/ {
proxy_pass http://127.0.0.1:30313/;
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;
}
```
### 步骤6重启Nginx
```bash
sudo nginx -t
sudo nginx -s reload
```
### 步骤7清除浏览器缓存并测试
1. 按 `Ctrl + Shift + Delete` 清除浏览器缓存
2. 或者按 `Ctrl + F5` 强制刷新
3. 打开开发者工具F12查看Network请求
4. 确认请求URL是 `https://jarvis.van333.cn/dev-api/captchaImage`
## 验证配置是否正确
打包完成后,检查打包后的文件:
```cmd
cd d:\code\ruoyi-vue\dist\static\js
findstr /s /i "134.175.126.60" *.js
```
如果找到包含该IP的文件说明环境变量未生效需要
1. 确认 `.env.production` 文件存在且内容正确
2. 删除 `dist` 目录后重新打包
3. 确认打包命令是 `npm run build:prod`(不是 `npm run build`
## 如果还是不行
检查 `vue.config.js` 第15行应该是
```javascript
const baseUrl = process.env.VUE_APP_BASE_API || (process.env.NODE_ENV === 'production' ? '/dev-api' : 'http://127.0.0.1:30313')
```
如果不对,说明配置未更新,需要重新保存 `vue.config.js` 文件。

89
配置说明.md Normal file
View File

@@ -0,0 +1,89 @@
# 解决HTTPS访问后端接口问题
## 问题现象
访问 `https://jarvis.van333.cn` 时,前端请求仍然是 `http://134.175.126.60:30313/captchaImage`,导致混合内容错误。
## 原因分析
1. **缺少环境变量配置文件**`.env.production` 文件不存在,打包时使用了默认值
2. **打包后的代码包含硬编码IP**如果之前打包时使用了IP地址需要重新打包
## 解决步骤
### 1. 创建环境变量文件
请在项目根目录手动创建以下两个文件:
#### `.env.development`(开发环境)
```
# 开发环境配置
# 开发环境使用代理路径通过vue.config.js的devServer代理到后端
VUE_APP_BASE_API=/dev-api
```
#### `.env.production`(生产环境)
```
# 生产环境配置
# 生产环境使用相对路径通过nginx代理到后端
VUE_APP_BASE_API=/dev-api
```
**或者运行批处理文件:**
```
双击运行:创建环境变量文件.bat
```
### 2. 重新打包项目
```bash
npm run build:prod
```
### 3. 部署到服务器
`dist` 目录中的文件部署到 `/www/sites/jarvis.van333.cn/index/`
### 4. 配置Nginx
确保使用 `nginx-https.conf` 中的配置,关键部分:
```nginx
location /dev-api/ {
proxy_pass http://127.0.0.1:30313/;
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;
}
```
### 5. 重启Nginx
```bash
sudo nginx -t
sudo nginx -s reload
```
## 验证
1. **清除浏览器缓存**强制刷新Ctrl+F5
2. **打开开发者工具**F12查看Network标签
3. **确认API请求**应该是:
-`https://jarvis.van333.cn/dev-api/captchaImage`
- ❌ 不是 `http://134.175.126.60:30313/captchaImage`
## 注意事项
1. **必须重新打包**:修改环境变量后,必须重新运行 `npm run build:prod`
2. **清除浏览器缓存**:旧的打包文件可能被浏览器缓存
3. **检查nginx配置**:确保 `/dev-api/` 路径的代理配置正确
4. **检查后端服务**:确保后端服务运行在 `127.0.0.1:30313`
## 如果仍然有问题
1. 检查打包后的 `dist/static/js/` 目录中的JS文件搜索是否包含 `134.175.126.60`
2. 如果找到,说明打包时环境变量未生效,检查:
- `.env.production` 文件是否存在
- 文件内容是否正确(`VUE_APP_BASE_API=/dev-api`
- 是否在正确的目录(项目根目录)
- 重新打包前是否删除了旧的 `dist` 目录